Jquery 自动完成 - 用于结果列表的自定义 html

问题描述

我指的是这个插件:http://jqueryui.com/demos/autocomplete/

所以结果的原始结构是

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

我需要让里面的链接看起来像这样:

I need to make the links inside to look something like this:

<a class="myclass" customattribute="something"> The item </a>

请不要告诉我编辑插件的唯一解决方案，因为我不希望网站上的所有自动完成都采用相同的格式.

Please don't tell me the only solution it to edit the plugin because i don't want the same format for all autocompletes on the site.

推荐答案

您需要替换 _renderItem 方法(对于有问题的自动完成):

You need to replace the _renderItem method (for the autocomplete in question):

$("selector").autocomplete({ ... })
   .data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a class='myclass' customattribute='" + item.customattribute + "'>" + item.label + "</a>" )
            .appendTo( ul );
   };

(假设您的 source 中的 items 有一个名为 customattribute 的属性)

(assuming the items in your source have a property called customattribute)

如本例所示:http://jqueryui.com/demos/autocomplete/#自定义数据

这篇关于Jquery 自动完成 - 用于结果列表的自定义 html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！