JQuery와 자동 완성이 코드 내보기에 내가 아약스와 JQuery와 자동 완성을

Question

어떤 결과를 비활성화

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

뭔가 당신이 ID의 '에 의해 비교되지만 일반적인 생각은 동일 가정, 이미 VM 목록에 존재하는 모든 항목을 제외하여 결과 목록을 필터링 할 것입니다. 당신이 항목이 어떻게 보면 더 많은 사용자 정의를 원하는 경우

업데이트

, 당신은 JQuery와 UI의 _renderItem 기능을 덮어 쓸 수 있습니다. jquery UI 웹 사이트에서 자동 완성 예제를 가져 와서 사용자가 선택할 수 없도록 "기존"선택을 다른 방식으로 표시하도록 수정했습니다.

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