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

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

所以结果的原始结构是

 
 item 1 
 
 item 2 
 
 item 3 
  

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

  The item  

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

Answer 1

您需要替换_renderItem方法（对于有问题的自动完成）：

 $("selector").autocomplete({ ... }) .data( "autocomplete" )._renderItem = function( ul, item ) { return $( "
" ) .data( "item.autocomplete", item ) .append( "" + item.label + "" ) .appendTo( ul ); }; 

（假设source的items具有名为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输出的“label”字段中传递html（如

   sample ）以进行自动完成。

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

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

发布日期：2013年7月28日

Answer 3

您可以尝试使用“open”事件添加属性：

 $( ".selector" ).autocomplete({ open: function(event, ui) { var jArrEl = $("a.ui-corner-all"); jArrEl.addClass("myclass"); jArrEl.attr("customattribute","something"); } });