无法获取jQuery autoComplete进行过滤

时间:2013-09-03 10:50:35

标签: javascript jquery asp.net autocomplete

您好我正在尝试让jQuery的autoComplete ui工作。

目前我有一个asp.net TextBox,我正在调用webservice并将此列表的结果链接到文本框。我正在调用的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.
    });
}

一切都很好,如果我开始在文本框中输入然后结果出现但问题是结果列表未根据我在搜索框中键入的内容进行过滤,它只显示列表中的每个项目无论我输入什么内容,都不会对其进行过滤。

有人可以闲暇几分钟而且知道我做错了吗?

谢谢, 克雷格

1 个答案:

答案 0 :(得分:0)

由于您不希望根据输入动态填充搜索项,因此您必须在初始化自动完成之前在数组中填充搜索项,即将$ .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
});