자동 완성 결과 배열

Question

jQuery UI의 .autocomplete()을 사용하여 입력란에 자동 완성 기능을 설정했습니다.

입력을 시작하면 드롭 다운 결과의 배열 (또는 개체)에 어떻게 액세스 할 수 있습니까?

내 페이지의 다양한 다른 요소를 강조 표시하기 위해 결과를 사용하고 싶습니다.

Answer 1

에 대한 이동합니다.

1. 필터링 결과에 대한 논리를 정의하려면 source 옵션을 사용하십시오. 이 논리는 위젯의 소스 코드와 동일 할 것이다 :

   $("#auto").autocomplete({ 
       source: function (request, response) { 
        var results = $.ui.autocomplete.filter(source, request.term); 
   
        $("#results").text(results.join(", ")); 
   
        response(results); 
       } 
   }); 
   

   예 :http://jsfiddle.net/andrewwhitaker/27S6p/

   원격 데이터 소스를 사용하는 경우, 이것이 당신의 AJAX 응답에 쉽게 통합 할 수 있습니다.

   var __response = $.ui.autocomplete.prototype._response; 
   $.ui.autocomplete.prototype._response = function(content) { 
       __response.apply(this, [content]); 
       this.element.trigger("autocompletesearchcomplete", [content]); 
   }; 
   
   $("#auto").autocomplete({ 
       source: src 
   }).bind("autocompletesearchcomplete", function (event, results) { 
       $("#results").text(results.join(", ")); 
   }); 
   

   예 :http://jsfiddle.net/andrewwhitaker/V9Vun/

   나는 것 여러 자동 완성 위젯을위한 솔루션을 필요로하는 경우

2. , 당신은 당신이 결합 할 수있는 특별한 이벤트를 마련하기 위해 _response 함수를 재정의 할 수 페이지에 여러 위젯이 있고 모든 위젯에 대해이 작업을 수행해야하는 경우에만이 솔루션을 사용하십시오.

이상적인 것은 아니지만 원하는 결과를 얻을 수 있습니다.

Answer 2

result 이벤트를 살펴보십시오. 자동 완성에서 보여주는 개체 배열을 줄 것입니다.

http://docs.jquery.com/Plugins/Autocomplete/result#handler

Answer 3

당신은

$('input[type="text"]').autocomplete({ 
    source: availableTags, 
    open: function(event, ui) { 
     var autocomplete = $(this).data("autocomplete"), 
     menu = autocomplete.menu; 
     console.log(menu.element.children()); 
    } 
}); 

menu.element.children()과 옵션에 액세스 할 수 있습니다 당신에게 HTML 목록 항목을 제공합니다. 쉽게 파싱 할 수 있으며 (HTML 제거) 배열을 만들어 강조 표시 기능에 전달할 수 있습니다.

JSFiddle

Edit2가 : 다음 편집 예상 값을 반환하지 않습니다.

편집 대신 menu.element에 접근, 당신은이 작업을 수행 할 수있는 방법은 두 가지가 있습니다 console.log(autocomplete.options.source);

New Fiddle