JQuery UI 자동 완성에서 요소 클래스를 어떻게 변경합니까?

Question

자동 완성이 형식으로 데이터를 출력한다 :

<ul class="pageitem"> 
    <li class="menu"> 
    <a class="name">item 1</a> 
    </li> 
    <li class="menu"> 
    <a class="name">item 2</a> 
    </li> 
    <li class="menu"> 
    <a class="name">item 3</a> 
    </li> 
</ul> 

:

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all"> 
    <li class="ui-menu-item"> 
    <a class="ui-corner-all">item 1</a> 
    </li> 
    <li class="ui-menu-item"> 
    <a class="ui-corner-all">item 2</a> 
    </li> 
    <li class="ui-menu-item"> 
    <a class="ui-corner-all">item 3</a> 
    </li> 
</ul> 

나는 그것을 이런 식으로 출력 할 그것을 어디에서 변경합니까? 심지어 jquery 스크립트를 변경하려고 시도했지만, 너무 복잡해서 hehe를 변경해야합니까?

Answer 1

클래스를 변경하지 마십시오. jQuery UI는 스타일을 위해서뿐만 아니라 선택기로 위젯을 작동하도록 클래스를 사용합니다. 변경하면 더 이상 작동하지 않습니다.

필요에 따라 선택 사항을 자신의 의지에 따라 스타일을 지정해야하는 경우 jQuery에서 제공하는 CSS 파일을 편집하거나 자신의 클래스를 추가해야합니다.

내가 그 클래스를 제거하지 마십시오, 반복 ...

당신이 앵커 후 LI들에 범위를 추가하려면이 같은 콜백 '개방', 뭔가 사용하려면

:

$(".selector").bind("autocompleteopen", function(event, ui) { 
    $(this).find('li.ui-menu-item').each(function(index){ 
     var span = $('<span>'); 
     $(span).text('whatever you want'); 
     $(this).append($(span)); 
    }); 
}); 

을

Answer 2

$('.ui-autocomplete.ui-menu.ui-widget.ui-widget-content.ui-corner-all').addClass('pageitem').removeClass('ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all'); 

$('.ui-menu-item').addClass('menu').removeClass('ui-menu-item'); 

$('.ui-corner-all').addClass('name').removeClass('ui-corner-all'); 

Answer 3

opencart 용 템플릿에서 작업 중이며 특정 tpl에서 tracking.tpl 자동 완성 목록 위치에 문제가 있습니다.

javascrit을 아는 사람은 매우 간단 할 수 있습니다. 나에 대해 많이 알지 못합니다.

생성 된 지점을 조금 세게 발견했습니다.

글쎄, 알았다. 나는 그것을 검색했다 : zIndex (this.element.zIndex() +1) .css ({top : 0, left : 0})jquery-ui-1.8.16.custom.min.js은 위나 왼쪽을 변경하여 위치 나 필요한 것을 변경합니다.

나는 매우 간단하지만 그렇게 간단하지 않다는 것을 안다.

나는 이것이 동일한 문제를 가진 다른 사람들을 도울 수 있기를 바랍니다.