0

Hi I'm trying to get jQuery's autoComplete ui to work.

Currently I have a asp.net TextBox and I'm calling a webservice and chaining the results of this list to the textbox. The webservice that I'm calling gets an unfiltered list of results from an SQL database.

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;
}

The javascripts that assigns this list to the textbox is (on load)

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.
    });
}

All is well as in if I start typing in the text box then the results appears but the problem is that the list of results isn't filtered based upon what I type in the search box it just shows every item in the list and doesn't filter it regardless of what I type in.

Could someone spare a few minutes and lemme know what I'm doing wrong please?

Thanks, Craig

4

1 回答 1

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
});
于 2013-10-04T16:58:18.743 回答