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

如果您的数据集很大，您可能希望避免此策略并在控制器操作中执行过滤。这种过滤的发生方式取决于你;但是，一个简单的方法就是改变你的行动方法：

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

jQuery UI AutoComplete不过滤服务器的响应

1 个答案: