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

Question

我指的是这个插件: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>

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

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

请不要告诉我编辑插件的唯一解决方案,因为我不希望网站上所有自动填充的格式相同.

Answer 1

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

$("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 );
   };

(假设items你source有一个叫做的财产customattribute)

如下例所示:http://jqueryui.com/demos/autocomplete/#custom-data

Answer 2

这也记录在 jquery-ui 自动完成文档中：Jquery-autocomplete。

诀窍是：

1. 使用这个 jquery 扩展：github 代码

2. 然后在自动完成选项通过

   html:true
   
   ...autocomplete({
   ...
   html:true
   ...
   }
   

   );

3. 现在您可以在 JSON 输出的“标签”字段中传递 html（如 <div>sample</div>）以进行自动完成。

如果您不知道如何将插件添加到 JQuery，那么：

1. 将插件（Scott González 的 html 扩展名）保存在 js 文件中或下载 js 文件。
2. 您已经在 html 页面（或 jquery-ui js 文件）中添加了 jquery-ui 自动完成脚本。在该自动完成 javascript 文件之后添加此插件脚本。

发布日期：2013 年 7 月 28 日