jQuery UI AutoComplete not filtering response from server

Question

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

Andrew Whitaker · Accepted Answer · 2011-07-06 17:13:07Z

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

It worked for me too.. Thanks a lot for this wonderful solution. It saved my time.

Collectives™ on Stack Overflow

jQuery UI AutoComplete not filtering response from server

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related