В автозаполнении JQuery UI как изменить классы элементов?

Question

Автозаполнение выводит данные в следующем формате:

<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>

где я могу изменить его, чтобы он выводил его таким образом:

<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>

? Я даже пытался изменить скрипт jquery, но он слишком сложен для меня, хе-хе, что мне нужно изменить?

Answer 1

Вы не должны менять классы.jQuery UI использует классы не только для стилизации, но и как селекторы, чтобы заставить его виджеты работать, поэтому, если вы измените их, у вас больше не будет рабочего плагина.

В зависимости от ваших потребностей, если вам нужно стилизовать selectпо своему желанию вы должны отредактировать файл css, предоставленный jQuery, или добавить свои собственные классы.

Я повторяю, не удаляйте эти классы ...

Если вы хотитедобавьте диапазон к LI, после привязки используйте обратный вызов 'open', что-то вроде этого:

$( ".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

Я работал в шаблоне для opencart, и в определенном tpl, tracking.tpl У меня была проблема с позицией списка автозаполнения.

Там может быть очень просто для тех, кто знает javascrit, плохо, я не знаю много о.

Было немного сложно найти точку, где она генерируется.

Ну, я понял. Я выполнил поиск: zIndex (this.element.zIndex () + 1) .css ({top: 0, left: 0}) в jquery-ui-1.8.16 .custom.min.js измените только верхнюю и левую части, чтобы изменить положение или то, что вам нужно.

Я знаю, его очень просто плохо не так просто найти.

Надеюсь, это поможет другим с такой же проблемой.

Answer 3

$('.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');