jQuery UI AutoComplete not filtering response from server

I'm using jQueryUI AutoComplete but am having a small problem in that no filtering is taking place as the user types in the text box.

Basically what happens is that after I've typed 3 characters the auto-fill drop down fills with the entire collection of items returned from the server but the choice does not narrow down as more characters are typed.

Any ideas as to why this is happening?

Client:

$("#Make").autocomplete({
    minLength: 3,
    source: function (request, response) {开发者_如何学运维
        $.ajax({
            type: "POST",
            url: '@Url.Action("LookupGadgets", "Quote")',
            dataType: "json",
            data: {
                type: $("#Type").val()
            },
            success: function (data) {
                response($.map(data, function (c) {
                    return {
                        label: c.Details,
                        value: c.Details
                    }
                }));
            }
        });
    }
});

Server:

public ActionResult LookupGadgets(string type)
{
    var retValue = gadgetsRepository.AvailableGadgets
        .Where(x => x.Type == type)
        .OrderBy(x => x.Make)
        .Select(r => new { Details = r.Make + " " + r.Model });
    return Json(retValue);
}

When you use the remote flavor of autocomplete, the widget expects you to do the filtering. Judging by your action method, you are just selecting items from your repository and returning them to the widget, so the dropdown contains all of the results.

If you want to use remote data but want jQueryUI to take care of the filtering (which might be fine depending on the size of your dataset), you could request an array of items via AJAX first and then let autocomplete take care of the rest:

$.ajax({
    type: "POST",
    url: '@Url.Action("LookupGadgets", "Quote")',
    dataType: "json",
    data: {
        type: $("#Type").val()
    },
    success: function (data) {
        var source = $.map(data, function(c) {
            return { label: c.Details, value: c.Details };
        });
        $("#Match").autocomplete({
            source: source,
            minLength: 3
        });
    }
});

If your dataset is large, you may want to avoid this strategy and perform the filtering in your controller action. How this filtering occurs is really up to you; however, a simple way to accomplish it would be to change your action method:

public ActionResult LookupGadgets(string type, string term)
{
    var retValue = gadgetsRepository.AvailableGadgets
        .Where(x => x.Type == type && x.Make.Contains(term))
        .OrderBy(x => x.Make)
        .Select(r => new { Details = r.Make + " " + r.Model });
    return Json(retValue);
}

And slightly change your AJAX call:

$.ajax({
    type: "POST",
    url: '@Url.Action("LookupGadgets", "Quote")',
    dataType: "json",
    data: {
        type: $("#Type").val(),
        term: request.term
    },
    success: function (data) {
        response($.map(data, function (c) {
            return {
                label: c.Details,
                value: c.Details
            }
        }));
    }
});