JQuery UI 自动完成功能没有匹配或自动填充答案

【问题标题】：JQuery UI AutoComplete functionaility doesnt have matching or autofillJQuery UI 自动完成功能没有匹配或自动填充
【发布时间】：2012-02-02 14:45:21
【问题描述】：

我正在使用最新的自动完成小部件，它是最新 Jquery UI 的一部分。我需要的两件事是在我键入时自动填充文本框，以及将键入的值与数据库中的值匹配的方法。有谁知道如何使用现有的自动完成功能来做到这一点？谢谢

【问题讨论】：

如果您希望自动填充功能自动填充，请阅读：stackoverflow.com/questions/2933713/…
这有帮助吗：stackoverflow.com/questions/3689405/… ?
对不起，我没有说清楚。我有一个使用 jquery UI 并从 MVC 3 控制器返回 JSON 格式的数据的自动完成小部件。一切正常。我要添加的是能够在输入时完成单词（自动填充）并禁止数据库中不存在的值。

标签： jquery jquery-ui jquery-ui-autocomplete

【解决方案1】：

免责声明：这仅适用于支持input.setSelectionRange 的现代浏览器。如果您想要针对旧版浏览器的解决方案，则需要找到一个跨浏览器的解决方案。

无论如何，这是我的处理方法：

$(document).ready(function() {
    $("#auto").autocomplete({
        source: function(request, response) {
            /* autofill: */

            /* If using AJAX, place your AJAX request here */
            var results = $.ui.autocomplete.filter(src, request.term)
                , el = this.element[0];

            if (results.length) {
                el.value = results[0];

                /* This will not work < IE9 */
                el.setSelectionRange(request.term.length, el.value.length);
            }

            response(results);
        },
        change: function (event, ui) {
            /* mustmatch: */
            if (!ui.item) {
                this.value = '';
            }
        }
    });
});

示例： http://jsfiddle.net/SgxyT/

如您所见，mustmatch 更容易实现。如果未在下拉列表中选择，您只需还原输入的值。

另一方面，autofill 将要求您使用函数作为 source 进行自动完成、确定结果并在输入中设置选择。

【讨论】：

【解决方案2】：

您必须编写一个服务器端脚本，该脚本构建正确的 SQL 查询并以 JSON 格式返回匹配的行，与自动完成规范兼容。

【讨论】：

【解决方案3】：

你看到这个链接http://jqueryui.com/demos/autocomplete/#remote-jsonp了吗？

您可以提及服务器页面作为您的数据源。它在内部使用 jquery ajax。

  $("#txtSearchKey").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "getcityname.aspx?term=" + $("#txtSearchKey").val(),
                        dataType: "json",
                        success: function (data) {
                            response($.map(data, function (item) {
                                return { label: item.CityName, value: item.CityId }
                            }));
                        }
                    });
                }
    });

您应该有一个服务器页面（在本示例中为 getcityname.aspx），该页面读取查询字符串值并调用您的数据库以获取城市名称以您在文本框中输入的 ID 为“txtSearchKey”的内容开头。您可以通过 response.write 返回响应。

【讨论】：