Question

我正在使用最新的自动完成小部件，它是最新的Jquery UI的一部分。我需要的两件事是自动填充以在我键入时填充文本框，以及将输入的值与数据库中的值匹配的方法。有没有人知道如何使用现有的自动完成功能执行此操作？感谢

Answer 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，确定结果，并在输入中设置选择。

Answer 2

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

Answer 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返回响应。

JQuery UI AutoComplete功能没有匹配或自动填充

3 个答案: