JQuery 自动完成禁用某些结果

Question

在我的视图中，我有一个带有 ajax 的 jquery 自动完成功能：

$('#QuickSearchProduct').autocomplete({
    source: function (request, response) {
        var term = request.term;
        var url = url ? url : $(this.element).attr('data-autocomplete-url');
        cache[url] = cache[url] || {};
        if (term in cache[url]) {
            response(cache[url][term]);
            return;
        }
        var url = url ? url : $(this.element).attr('data-autocomplete-url');
        lastXhr = $.getJSON(url, request, function (data, status, xhr) {
            cache[url][term] = data;
            if (xhr === lastXhr) {
                response(data);
            }
        });
    },
    select: function (event, result) {
        var callback_url = $(this).attr('data-callback-url');
        console.log('url', callback_url);
        var idContainer = result.item.id;
        $.ajax({
            url: callback_url,
            dataType: 'json',
            data: { idContainer: idContainer },
            success: function (container) {
                var newLine = BlankPriceListLine;
                newLine.Barcode = container.Barcode;
                newLine.IdContainer = container.IdContainer;
                newLine.ContainerName = container.ContainerName;
                newLine.SuggestedRP = container.SuggestedRP;
                newLine.IdCurrency = container.IdCurrency;
                newLine.IdTaxCode = container.IdTaxCode;
                console.log('newLine', newLine);
                vm.addLine(new MasterPriceListLines(newLine));
            }
        });    
        $(this).val('');
        return false;
    }
});

在代码中，自动完成功能用于快速搜索产品，当在结果中选择项目时，该项目将使用 vm.addLine 方法添加到列表中，这是通过敲除 js 完成的。 问题是我想禁用已经在列表中的结果，所以..我怎样才能在自动完成中禁用该结果？

Answer 1

您可以尝试使用 VM 列表中的数据过滤自动完成结果。

response(ko.utils.arrayFilter(data, function(item) {
    return !ko.utils.arrayFirst(vm.Lists, function(listItem) {
        return listItem.id === item.id;
    }
}

类似的方法会通过排除 VM 列表中已经存在的任何项目来过滤您的结果列表，假设您按 id 进行比较，但总体思路是相同的。

更新

如果您想要更多地自定义项目的外观，您可以覆盖 jquery ui 中的 _renderItem 函数。我从 jquery ui 网站获取了自动完成示例，并对其进行了修改，以不同的方式显示“现有”选择，因此用户无法选择它。

http://jsfiddle.net/3UDAk/6/