无法获取jQuery autoComplete进行过滤

Question

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

Answer 1

Since you don't want to dynamically populate the search terms based on input, you must populate your search items in an array prior to initialising the autocomplete, ie move the $.ajax call outside of the call to autocomplete:

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

So, when initialising the jquery autocomplete, you are passing a pre-populated array as the source parameter which will cause the filter to act on the static list.

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