jQuery自动完成在按下回车键时触发

Question

jQuery自动完成在按下回车键时触发

3

我正在使用Jquery UI自动完成功能，它很好用，但我正试图解决这个问题并希望得到一些帮助。自动完成在一个包含ASP面板的文本框中，表单上Enter键的默认行为是提交表单。如果用户在自动完成文本框中输入内容并按下Enter键，则希望自动完成Web服务在按下Enter键时触发并返回结果。我在网上读到应该处理自动完成的Keypress事件，但我一直在尝试着如何调用按键按下时的自动完成功能，但不确定如何在Keypress事件中调用自动完成函数的正确语法。我在下面展示了我的代码，如果有人知道如何实现，请在代码中给出示例，因为我在调用按键按下时的函数方面遇到了困难，非常感谢您的帮助！以下是代码：

//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())
            } 
        });

- Shokwave

3个回答

1

您需要在自动完成对象上触发“搜索”功能。

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

请查阅Jquery文档网站以获取更多信息。

- leon.io

非常感谢你的建议，Leon。我已经按照你的建议完成了这个任务，代码如下：(txtCity).autocomplete( "search", txtCity.val())。 - Shokwave

0

请查看已接受的答案，忽略以下内容

首先，我认为您的想法是错误的。自动完成的概念是让用户继续输入，直到答案完全解决（或从给定选项中选择他们想要的一个，这可以通过箭头键进行选择，并使用ENTER选择结果）。

话虽如此，如果您真的想覆盖ENTER行为，我建议您单独通过“keydown”而不是作为自动完成小部件的一部分来执行此操作。以下jsFiddle应该让您了解要查看的内容：http://jsfiddle.net/2Z25f/

此致敬礼，

toepoke.co.uk

- toepoke.co.uk

我了解默认行为是从下拉结果中选择一个条目，但用户抱怨说如果他们快速输入整个名称并按Enter键，什么也不会发生，自动完成的结果也不会显示，因此我想在用户输入内容并按Enter键时触发自动完成，这样他们至少可以看到与他们输入的类似的自动完成结果，否则什么也不会发生。 - Shokwave

抱歉，我误解了你的意思。我会编辑我的帖子，以便更清楚地看到被接受的答案。 - toepoke.co.uk

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user3700666 · Accepted Answer

为了解决这个问题，您可以在自动完成中添加一个“搜索”属性和一个新变量，按照以下步骤进行：

创建一个新变量（var canPass = false）;
在自动完成中添加“搜索”属性;
在键盘按下事件中触发搜索函数;

因此，结果是：

//将自动完成附加到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());
        }
    });

因此，使用此代码，您的自动完成将在按ENTER键时开始搜索。