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不仅将类用于样式，而且作为选择器使其小部件工作，如果你更改它们，你就不再拥有一个可用的插件。

根据您的需要，如果您需要根据自己的意愿设置样式，您应该编辑jQuery提供的css文件，或者添加自己的类。

我再说一遍，不要删除这些课程......

如果你想在LI之后添加一个范围，请在锚之后使用回调＆＃39;打开＆＃39;，如下所示：

$( ".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可能非常简单，不好我没有太多的知识。

很难找到产生它的点。

嗯，我明白了。我在 jquery-ui-1.8中搜索了它： zIndex（this.element.zIndex（）+ 1）.css（{top：0，left：0}）。 16.custom.min.js 只更改顶部和左侧以更改位置或所需内容。

我知道，非常简单的坏事并不那么简单。

我希望这可以帮助其他人解决同样的问题。

在JQuery UI中自动完成如何更改元素类？

3 个答案: