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添加到列表中，这是通过knockout 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/

JQuery自动完成功能会禁用一些结果

1 个答案: