无法让 jQuery autoComplete 过滤答案

【问题标题】：Can't get jQuery autoComplete to filter无法让 jQuery autoComplete 过滤
【发布时间】：2013-09-03 10:50:34
【问题描述】：

您好，我正在尝试让 jQuery 的自动完成 ui 工作。

目前我有一个 asp.net 文本框，我正在调用一个 web 服务并将这个列表的结果链接到文本框。我正在调用的 Web 服务从 SQL 数据库中获取未经过滤的结果列表。

public List<string> getAutoCompleteList() {
    DataSet dsAutoList = getAutoList();
    DataTable dtAutoList = dsAutoList.Tables[0];
    List<string> lstTitles = new List<string>();
    foreach (DataRow drAutoList in dtAutoList.Rows)
    {
        //zAutolist = zAutolist + drAutoList["course_title"].ToString();
        lstTitles.Add(drAutoList["course_title"].ToString());
    }

    return lstTitles;
}

将此列表分配给文本框的 javascripts 是（加载时）

function autoComplete() {
    $(".txtSearch").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "/webservice/wsJQueryAutoComplete.asmx/getAutoCompleteList",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                //dataFilter: function(data) { return data; },
                success: function(data) {
                    response($.map(data.d, function(item) {
                        return { value: item }
                    }))
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
        },
        minLength: 3    // MINIMUM 3 CHARACTER TO START WITH.
    });
}

一切正常并且无论我输入什么都不会过滤它。

谁能抽出几分钟让我知道我做错了什么？

谢谢，克雷格

【问题讨论】：

您不会将在文本框中输入的数据发送到您的 ajax 调用，在此基础上您可以获得过滤后的列表，而是返回整个列表
当您向服务器发送请求时，将搜索到的词也发送到服务器，如data: {term: request.term}，并在服务器中实现过滤逻辑
@Deepanshu 我想对服务器进行的唯一调用是获取用户所有可用标题的完整列表。我认为 jquery 自动完成功能会根据用户在搜索框中输入的内容自行过滤此列表，而无需一次又一次地返回服务器。不是这样吗？
意思是如果你输入一个像xyz这样的随机字符串，即使这样它也会显示整个列表？
是的，只要我输入 3 个或更多字符，列表就会显示为完全未过滤

标签： javascript jquery asp.net autocomplete

【解决方案1】：

由于您不想根据输入动态填充搜索词，因此您必须在初始化自动完成之前将搜索项填充到数组中，即将 $.ajax 调用移到自动完成调用之外：

$.ajax({
    url: "/webservice/wsJQueryAutoComplete.asmx/getAutoCompleteList",
    dataType: "json",
    type: "POST",
    contentType: "application/json; charset=utf-8",
    // Changed here:
    success: function(data) {
        $(".txtSearch").autocomplete({
             source: data.d
        });
    }
});

因此，在初始化 jquery 自动完成时，您将传递一个预先填充的数组作为源参数，这将导致过滤器对静态列表起作用。

$(".txtSearch").autocomplete({
    source: prepopulatedList
});

【讨论】：