1

次のコードを使用して、ビューに 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 で行われます。問題は、既にリストにある結果を無効にしたいということです..オートコンプリートでその結果を無効にするにはどうすればよいですか?

4

1 に答える 1

1

VM リストのデータを使用して、オートコンプリートの結果をフィルタリングしてみてください。

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

そのようなものは、ID で比較していると仮定して、VM リストに既に存在するアイテムを除外することによって結果リストをフィルタリングしますが、一般的な考え方は同じです。

アップデート

アイテムの外観をさらにカスタマイズしたい場合は、jquery ui で _renderItem 関数を上書きできます。jquery ui Web サイトからオートコンプリートの例を取得し、「既存の」選択を別の方法で表示するように変更して、ユーザーが選択できないようにしました。

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

于 2013-05-26T14:19:52.760 に答える