1

我在我们的一个网页中使用 JQuery 自动完成功能，该网页从 url 获取源数据并且工作正常。{

   $(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键”后才能触发自动完成？

4

2 回答 2

2

谢谢你们的回答和时间。

在嘲笑了一段时间后，我找到了一个适合我要求的解决方案。

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

<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>
于 2012-06-07T04:37:55.070 回答
1

jQuery UI自动补全在按下回车键时不会搜索，回车键仅在搜索后显示菜单时使用

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

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

于 2012-06-07T02:50:48.713 回答