한 페이지에 여러 개의 jQuery 자동 완성 인스턴스

Question

각 페이지마다 jQuery 자동 완성 플러그인의 각 인스턴스를 다르게 스타일을 지정하고 싶습니다. 나는 스타일을 각 인스턴스마다 다르게 설정하는 방법을 알 수 없다. 나는 div에서 ac_ * 스타일을 감싸서 CSS에서 식별 할 수없는 것 같습니다. 내가하는 모든 변화는 두 가지 모두에 영향을줍니다. 어떤 아이디어?

감사합니다.

<div class="differentStyle"> 
    <input type="text" class="autocomplete"> 
</div> 

결과가 돌아올

, 새로운 사업부 :

Answer 1

나는 당신이 당신의 문제는 자동 완성이 당신의 자리 ... 예를 내부에 배치되지 드롭 아래 목록 있다는 것을 발견 할 수있을 거라 생각 결과를 표시하기 위해 페이지에 추가되지만 "differentStyle"부문에는 포함되지 않습니다. DOM의 끝에 추가됩니다. 예를 들어 :

http://docs.jquery.com/Plugins/Autocomplete

Answer 2

다른 무언가를 찾고 있었 :

<div class="differentStyle"> 
    <input type="text" class="autocomplete"> 
</div> 

... 
<div class="ac_results">I get added by jQuery Autocomplete!</div> 
</body> 

설명서를 읽고, 나는 그것이 불가능 같은 페이지에 두 개의 자동 완성 상자의 스타일을 무시 만들 것입니다 말할 것 이 포스트에서 일어 났을 때 ... 다음 자동 완성 이벤트를 트래핑하고 자동 완성 출력이있는 외부에 내 자신의 클래스를 추가하여이 작업을 처리했습니다. 그런 다음 CSS를 사용하여 필요에 따라 요소의 서식을 지정하십시오. 희망이 사람을 도움이됩니다.

$input.autocomplete({ 
      focus : function(event, ui) { 
       $(".forms-search-result").parents("ul").addClass("myClass"); 
       return false; 
      }, 
      open : function(event, ui) { 
       $(".forms-search-result").parents("ul").addClass("myClass"); 
      }, 

예 CSS :

는 또한

.myClass a.ui-corner-all { font-weight:bold; } 

내 JSON 결과의 일부로서, I가 단순히 실제의 일부로서 내장 결과와 HTML 쉘 (내 JAVA AJAX 동작부터) 다시 전달 JSON "결과". 그렇게하면 각 결과 주위에 정교한 HTML을 만든 다음 위의 방법을 사용하여 원하는 방식으로 서식을 지정할 수 있습니다.

Answer 3

http://api.jqueryui.com/autocomplete/#method-widget

은 다음과 같이 뭔가를 추가

selector.autocomplete("widget").addClass('yourclass'); 

Answer 4

당신은 _renderMenu 방법을 다시 작성할 수 있습니다. 예를 들어 http://jqueryui.com/demos/autocomplete/#combobox을 가져 가십시오.

selector.data("autocomplete")._renderMenu=function(ul, items){ 
//do something here.. 
} 

Answer 5

jQuery UI 1.8을 사용하는 경우 UL 컨테이너를 쉽게 잡을 수 있다는 것을 알게되었습니다. 1.8에서 UI 컨테이너를 잡기 위해, 당신은 단순히 열려있는 방법에 다음을 추가 :

var $myAcInput = $("#my-acomplete-input"); 

... 
$myAcInput.autocomplete({ 
    open : function(event, ui) { 
    // Grab the widget that just opened: 
    var $resultsContainer = $formsInput.autocomplete("widget"); 
    // Add a custom rendering class and use tht to style your subelements 
    $resultsContainer.addClass("my-custom-results-container-class");    
    // Position the container wherever you want: 
    $resultsContainer.position({at: "center bottom", 
           my:"center top", 
           collision: "fit", 
           of: "#my-acomplete-input"});    
    } 
    source : etc etc etc 
}); 

Answer 6

솔루션은 매우 간단합니다 :

이

$("#target-input").autocomplete({ 
    open:function(event, ui) { 
     $('.ui-autocomplete.ui-menu').addClass('yourClass'); 
    }, 
    close:function(event, ui) { 
     $('.ui-autocomplete.ui-menu').removeClass('yourClass'); 
    } 
}); 

당신이 클래스에 코드를 넣을 수 있습니다 .yourClass

Answer 7

appendTo 옵션을 사용하면 자동 완료 목록을 body 대신 사용자 지정 컨테이너에 배치 할 수 있습니다. 그런 다음 스타일을 지정할 수 있습니다.예 :

JS :

$('#suggestions').autocomplete({source: get_suggestions, appendTo: '#my-suggestions'}) 

HTML :

<input type="text" id="suggestions"> 
<div id="my-suggestions"></div> 

CSS : 새로운 버전의

#my-suggestions { 
    position: absolute; 
} 

#my-suggestions .ui-autocomplete { 
    foo: bar; 
} 

Answer 8

는 "appendTo는"당신이 부모 요소를 선택할 수 있도록 하였다 제안 목록. 목록에 다른 부모 (in 또는 class 포함)를 만들 수 있습니다.

Answer 9

이 문제가 발생했을 때 jquery-ui는 모든 인스턴스에 고유 한 ID를 부여하고 # ui-id-1, # ui-id-2, dom의 첫 번째 자동 완성에서 숫자 1을 얻음을 알았습니다. , 두 번째 숫자 2 등. 따라서 자동 완성의 순서가 알려진 경우 다른 스타일을 다른 ID에 적용 할 수 있습니다.