Question

我在我们的一个网页中使用JQuery自动完成功能，从网址获取源数据并且可以使用。 {

   $(function () {

        $("#name-list").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/MemberType/FindMemberTypes", type: "POST", dataType: "json",
                    data: { searchText: request.term, maxResults: 10 },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { label: item.DisplayText, value: item.description, id: item.id }
                        }))
                    }
                })
            },
            select: function (event, ui) {
                alert(ui.item ? ("You picked '" + ui.item.label + "' with an ID of " + ui.item.id)
                    : "Nothing selected, input was " + this.value);
            }
        });

    });

}

url“membertype / findmemberTypes”搜索memberType表并返回Json格式的成员类型列表。

我在这里遇到的问题是每次在文本框中的某个字符中使用键时，向服务器发出一个请求，扫描表并将数据返回给调用者。我希望以这样的方式更改行为：当用户真正想要搜索文本时，只有一次访问服务器。

只有在用户按下文本框中的“Enter键”后才能触发自动完成吗？

Answer 1

感谢大家的答案和时间。

经过一段时间的嘲笑之后，我找到了一个符合我要求的解决方案。

我刚刚添加了一些代码来完全禁用自动完成功能，并且只有在用户按下回车键时启用它。当用户尝试通过按退格键或删除键输入不同的文本时，将再次禁用该功能。

<input type="text" id="name-list" /> (Press enter for options)

<script type="text/javascript" language="javascript">
    $(function () {



        $("#name-list").autocomplete({

            source: function (request, response) {
                $.ajax({
                    url: "/MemberType/FindMemberTypes", type: "POST", dataType: "json",

                    data: { searchText: request.term, maxResults: 10 },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { label: item.description, value: item.description, id: item.id }
                        }))
                    }
                })
            },

            select: function (event, ui) {
                alert(ui.item ? ("You picked '" + ui.item.label + "' with an ID of " + ui.item.id)
                    : "Nothing selected, input was " + this.value);

            }
        }).keypress(function (e) {
            if (e.keyCode === 13) {
                $("#name-list").autocomplete("enable");
                $("#name-list").autocomplete("search", $("name-list").val());
            }
            else if ((e.keyCode == 8) || (this.value == "") || (e.keyCode == 46)) 
            {
                $("#name-list").autocomplete("disable");
            }


        }); ;

        $("#name-list").autocomplete("disable");

    });
</script>

Answer 2

jQuery UI自动完成在按下回车键时不会搜索，只有在搜索后显示菜单时才会使用回车键

您可以查看设置延迟和minLength选项以减少请求的数量。

或者您可以查看按下回车键时触发的另一个自动完成插件。

按Enter键后启用jquery自动完成功能

2 个答案: