在jQuery UI自动完成中使用HTML
在jQuery UI 1.8.4之前，我可以使用JSON数组中的HTML来构build自动完成。
我能够做到这样的事情：
$row_array['label'] = '<span style="color: red; font-family: courier;">User, Name</span>'; 这将在下拉菜单中显示为红色文字。
从1.8.4不起作用。 我发现http://dev.jqueryui.com/ticket/5275告诉我使用自定义的HTML例子，我没有运气。
我怎么能让HTML显示在build议？
我的jQuery是：
<script type="text/javascript"> $(function() { $("#findUserIdDisplay").autocomplete({ source: "ui_autocomplete_users_withuname.php", minLength: 2, select: function(event, ui) { $('#findUserId').val(ui.item.id); } }); }); </script>
我的JSON数组包括如下所示的HTML：
[{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}]
添加到您的代码：
).data( "autocomplete" )._renderItem = function( ul, item ) { return $( "<li></li>" ) .data( "item.autocomplete", item ) .append( "<a>"+ item.label + "</a>" ) .appendTo( ul ); };
所以你的代码变成：
<script type="text/javascript"> $(function () { $("#findUserIdDisplay").autocomplete({ source: "ui_autocomplete_users_withuname.php", minLength: 2, select: function (event, ui) { $('#findUserId').val(ui.item.id); return false; } }).data("ui-autocomplete")._renderItem = function (ul, item) { return $("<li></li>") .data("item.autocomplete", item) .append("<a>" + item.label + "</a>") .appendTo(ul); }; }); </script>
注意：在旧版本的jQueryUI中使用.data("autocomplete")"而不是.data("ui-autocomplete")
这也logging在jquery-ui自动完成文档中： http : //api.jqueryui.com/autocomplete/#option-source
诀窍是：
- 使用这个jQuery UI扩展
- 然后在自动完成选项传递
autocomplete({ html:true}); - 现在您可以传递html
<div>sample</div>在自动完成的JSON输出的“标签”字段中。
如果您不知道如何将插件添加到JQuery UI，那么：
- 将插件（ScottGonzález的html扩展名）保存在js文件中或者下载js文件。
- 您已经在您的html页面（或jquery-ui js文件）中添加了jquery-ui自动完成脚本。 在该自动完成JavaScript文件之后添加此插件脚本。
这个解决scheme不build议，但你可以编辑源文件jquery.ui.autocomplete.js（v1.10.4）
原版的：
_renderItem:function(t,i){return e("<li>").append(e("<a>").text(i.label)).appendTo(t)},
固定：
_renderItem:function(t,i){return e("<li>").append(e("<a>").html(i.label)).appendTo(t)},
我有同样的问题，但我更喜欢使用我的选项的静态数组选项（'源'）的性能。 如果你尝试过这个解决scheme，你会发现jQuery也search整个标签。
EG如果您提供：
[{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}]
然后input“span”将匹配这两个结果，让它search的值只覆盖$.ui.autocomplete.filter函数：
$.ui.autocomplete.filter = function(a,b){var g=new RegExp($.ui.autocomplete.escapeRegex(b),"i");return $.grep(a,function(c){return g.test(c.value||c)})}
您可以将最后一个参数c.value编辑为您想要的任何内容，例如c.id || c.label || c.value c.id || c.label || c.value c.id || c.label || c.value将允许您search标签，值或ID。
您可以根据需要为自动完成的源参数提供尽可能多的键/值。
PS：原始参数是c.label||c.value||c 。
我遇到了Clarence提到的问题。 我需要提供HTML以使样式和图像更加美观。 这导致键入“div”匹配所有元素。
但是，我的价值只是一个身份证号码，所以我不能让search运行。 我需要search来查找几个值，而不仅仅是ID号。
我的解决scheme是添加一个新的字段，只保存search值，并在jQuery UI文件中检查。 这就是我所做的：
（这是在jQuery UI 1.9.2;其他人可能是相同的。）
编辑6008行的filter函数：
filter: function (array, term) { var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i"); return $.grep(array, function (value) { if (value.searchonly == null) return matcher.test(value.label || value.value || value); else return matcher.test(value.searchonly); }); }
我添加了“value.searchonly”字段的检查。 如果在那里，它只使用该字段。 如果不在那里，它就像平常一样工作。
然后，像以前一样使用自动完成function，除了可以将“searchonly”键添加到JSON对象。
我希望能帮助别人！
