jQuery的自动完成 - 为结果自定义HTML上市 [英] Jquery autocomplete - custom html for result listing
本文介绍了jQuery的自动完成 - 为结果自定义HTML上市的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我指的这个插件: http://jqueryui.com/demos/autocomplete/
因此,原始结构的结果是
So the original structure for the results is
<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 );
};
(假设项目
在源
有一个叫做物业 customattribute
)
如本例所示:<一href=\"http://jqueryui.com/demos/autocomplete/#custom-data\">http://jqueryui.com/demos/autocomplete/#custom-data
这篇关于jQuery的自动完成 - 为结果自定义HTML上市的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文