Jquery自动完成火进入按键。

Im using Jquery UI Autocomplete and it works great but I am trying to get around this issue and would appreciate some help with. The autocomplete is on a textbox inside asp panel, the default behaviour on the form on Enter key is to submit the form. If the user types something into the Autocomplete textbox and presses Enter, I want the auto complete web service to fire off and brings back the results on Enter. I read online I was suppose to handle the Keypress event for autocomplete, I have been trying but not sure on how to call the autocomplete to fire on the keypress, I am showing my code below, if someone has an idea how this can be done please show by an example in the code since im having a problem with the correct syntax to call the function on the keypress, your helps appreciated, here is the code.

我使用Jquery UI Autocomplete，它很好用，但是我正在尝试解决这个问题，并希望得到一些帮助。自动完成是在一个文本框内的asp面板，在表单上的默认行为是提交表单。如果用户在自动完成文本框中输入内容并按Enter，我希望自动完成web服务启动并在Enter时返回结果。我在线阅读假设按键事件处理自动完成,我一直在,但不知道如何叫自动完成开火键盘按键,下面我显示我的代码,如果有人知道如何做到这一点请给一个例子的代码,因为我有一个问题与正确的语法来调用该函数在键盘按键,你可以欣赏,这是代码。

//Attach autocomplete to txtCity so user can lookup SPLCS by cities

        var city;
        var txtCity = $("[id$=txtAutoCity]")
        $(txtCity).autocomplete({
            source: function (request, response) {
                request.term = request.term.replace(/[^a-zA-Z\s]+/, "")
                $.ajax({
                    url: "../../Services.asmx/GetOfficesByCity",
                    data: "{ 'city': '" + request.term + "' }",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        response($.map(data.d, function (item) {

                            if (data.d != undefined) {
                                return {
                                    value: item.Display,
                                    result: item.CommaDelimited
                                }

                            }
                            else {
                                return true;
                            }
                        }))
                    },

                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(errorThrown);
                    }
                });
            },
            autoFill: false,
            minLength: 2,
            delay: 800,
            mustMatch: false,
            selecFirst: false,
            select: function (event, ui) {
                var selectedObj = ui.item;
                if (ui.item) {
                    city = ui.item.result.split(',')[0];

                    $("[id$=txtCity]").val(ui.item.result.split(',')[0]);
                    $("[id$=txtOffice]").val(ui.item.result.split(',')[1]);
                    $("[id$=txtDistrict]").val(ui.item.result.split(',')[2]);


                }
            },
            // Any action to be performed once the auto complete list closes
            close: function (event) {

            }
        }).keypress(function (e) {
            if (e.keyCode === 13) {
                //How to cancel default submit behaviour of form and call this
                //autocomplete function to fire??   
                e.preventDefault();
                //my_search_function($(txtCity).val())
            } 
        });

3 个解决方案

#1

You need to fire the search function on the autocomplete object.

您需要在自动完成对象上启动搜索函数。

($txtCity).autocomplete( "search", "TheSearchValueToSend" )

More info at the Jquery Doco Site

更多信息请访问Jquery Doco站点

#2

To solve this problem you can add a search property in your autocomplete and a new variable, following these steps:

要解决这个问题，您可以在autocomplete中添加一个搜索属性和一个新变量，执行以下步骤:

• Create a new variable (var canPass = false);
• 创建一个新的变量(var canPass = false);
• Add the search property inside of your autocomplete;
• 在自动完成中添加搜索属性;
• Fire the search function in the keypress event;
• 在按键事件中启动搜索功能;

So, the result is:

所以,结果是:

//Attach autocomplete to txtCity so user can lookup SPLCS by cities

//将autocomplete附加到txtCity，以便用户可以通过城市查找SPLCS。

    var canPass = false;
    var city;
    var txtCity = $("[id$=txtAutoCity]")
    $(txtCity).autocomplete({
        source: function (request, response) {
            request.term = request.term.replace(/[^a-zA-Z\s]+/, "")
            $.ajax({
                url: "../../Services.asmx/GetOfficesByCity",
                data: "{ 'city': '" + request.term + "' }",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataFilter: function (data) { return data; },
                success: function (data) {
                    response($.map(data.d, function (item) {

                        if (data.d != undefined) {
                            return {
                                value: item.Display,
                                result: item.CommaDelimited
                            }

                        }
                        else {
                            return true;
                        }
                    }))
                },

                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(errorThrown);
                }
            });
        },
        autoFill: false,
        minLength: 2,
        delay: 800,
        mustMatch: false,
        selecFirst: false,
        select: function (event, ui) {
            var selectedObj = ui.item;
            if (ui.item) {
                city = ui.item.result.split(',')[0];

                $("[id$=txtCity]").val(ui.item.result.split(',')[0]);
                $("[id$=txtOffice]").val(ui.item.result.split(',')[1]);
                $("[id$=txtDistrict]").val(ui.item.result.split(',')[2]);


            }
        },
        // Any action to be performed once the auto complete list closes
        close: function (event) {

        },
        search: function (value, event) {
            if (!canPass) {
               event.preventDefault();
            }
            else {
               canPass = false;
            }
        },
    }).keypress(function (e) {
        if (e.keyCode === 13) {
           canPass = true;
           $(txtCity).autocomplete("search", ($txtCity).val());
        }
    });

So, with this code your autocomplete starts to search when you press ENTER.

有了这段代码，当你按回车键时，自动补全开始搜索。

#3

Please see accepted answer, disregard the following

请见被接受的答案，无视下面的内容。

Firstly I would suggest IMHO you're thinking about this the wrong way around. The notion of the autocomplete is for the user to continue typing until the answer is fully resolved (or select from the given options for the one they want, which incidentally can be achieved with the arrow keys to select, with ENTER selecting the result).

首先，我建议你不要这么想。autocomplete的概念是让用户继续输入，直到答案完全解析(或者从给定的选项中为他们想要的选项进行选择，顺便说一下，可以通过选择箭头键来实现，输入选择结果)。

That said if you really want to override the ENTER behaviour I would suggest doing this separately through "keydown" rather than as part of the autocomplete widget. The following jsFiddle should you an idea of what to look at: http://jsfiddle.net/2Z25f/

也就是说，如果您真的想重写ENTER行为，我建议您通过“keydown”而不是作为autocomplete小部件的一部分来分别执行。下面的jsFiddle应该是什么内容:http://jsfiddle.net/2Z25f/

Kind regards,

亲切的问候,

toepoke.co.uk

toepoke.co.uk