asp.net-mvc - jQuery UI AutoComplete 不过滤来自服务器的响应

Question

我正在使用 jQueryUI AutoComplete，但遇到一个小问题，即当用户在文本框中键入内容时不会进行任何过滤。

基本上，在我输入 3 个字符后，自动填充下拉列表会填充从服务器返回的整个项目集合，但随着输入更多字符，选择范围不会缩小。

关于为什么会发生这种情况有什么想法吗？

客户:

$("#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
                    }
                }));
            }
        });
    }
});

服务器:

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

Answer 1

当您使用远程自动完成功能时，小部件希望您进行过滤。从您的操作方法来看，您只是从存储库中选择项目并将它们返回到小部件，因此下拉列表包含所有结果。

如果您想使用远程数据，但希望 jQueryUI 负责过滤(这可能很好，具体取决于数据集的大小)，您可以首先通过 AJAX 请求一个项目数组，然后让自动完成处理其余的:

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

如果您的数据集很大，您可能希望避免此策略并在 Controller 操作中执行过滤。如何进行这种过滤实际上取决于您；但是，实现它的一个简单方法是更改​​您的操作方法:

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

并稍微更改您的 AJAX 调用:

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