在 jQuery UI 自动完成中使用 HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3488016/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using HTML in jQuery UI autocomplete
提问by Jason
Before jQuery UI1.8.4 I could use HTMLin the JSON array I built to work with an autocomplete.
在jQuery UI1.8.4之前，我可以在我构建的 JSON 数组中使用HTML以使用自动完成功能。
I was able to do something like:
我能够做这样的事情：
$row_array['label'] = '<span style="color: red; font-family: courier;">User, Name</span>';
That would show up as red text in the drop down.
这将在下拉列表中显示为红色文本。
As of 1.8.4 that does not work. I found http://dev.jqueryui.com/ticket/5275which tells me to use the custom HTML example herewhich I have had no luck with.
从 1.8.4 开始，这不起作用。我发现http://dev.jqueryui.com/ticket/5275告诉我在这里使用自定义 HTML 示例，但我没有运气。
How can I go about getting HTML to show up in the suggestion?
我怎样才能让 HTML 显示在建议中？
My jQuery is:
我的 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>
My JSON array includes HTML like the following:
我的 JSON 数组包含 HTML，如下所示：
[{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}]
回答by Kieran Andrews
Add this to your code:
将此添加到您的代码中：
).data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>"+ item.label + "</a>" )
.appendTo( ul );
};
So your code becomes:
所以你的代码变成：
<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>
Note:On old versions of jQueryUI use .data("autocomplete")"instead of .data("ui-autocomplete")
注意：在旧版本的 jQueryUI 上使用.data("autocomplete")"而不是.data("ui-autocomplete")
回答by Wasiq
This is also documented in jquery-ui autocomplete documentation at: http://api.jqueryui.com/autocomplete/#option-source
这也记录在 jquery-ui 自动完成文档中：http: //api.jqueryui.com/autocomplete/#option-source
The trick is:
诀窍是：
- Use this jQuery UI extension
- Then in autocomplete option pass
autocomplete({ html:true}); - Now you can pass html
<div>sample</div>in "label" field of JSON output for autocomplete.
- 使用这个 jQuery UI 扩展
- 然后在自动完成选项通过
autocomplete({ html:true}); - 现在您可以
<div>sample</div>在 JSON 输出的“标签”字段中传递 html以进行自动完成。
If you don't know how to add the plugin to JQuery UI then:
如果您不知道如何将插件添加到 JQuery UI，那么：
- Save the plugin(Scott González' html extension) in a js file or download the js file.
- You have already added the jquery-ui autocomplete script in your html page(or the jquery-ui js file). Add this plugin script after that autocomplete javascript file.
- 将插件（Scott González 的 html 扩展名）保存在 js 文件中或下载 js 文件。
- 您已经在 html 页面（或 jquery-ui js 文件）中添加了 jquery-ui 自动完成脚本。在该自动完成 javascript 文件之后添加此插件脚本。
回答by revoke
This solution is not recommended but you can just edit source file jquery.ui.autocomplete.js (v1.10.4)
不推荐使用此解决方案，但您可以编辑源文件 jquery.ui.autocomplete.js (v1.10.4)
Original:
原来的：
_renderItem:function(t,i){return e("<li>").append(e("<a>").text(i.label)).appendTo(t)},
Fixed:
固定的：
_renderItem:function(t,i){return e("<li>").append(e("<a>").html(i.label)).appendTo(t)},
回答by Clarence Liu
I had the same issue, but I prefer to use a static array of options for my option('source') for performance. If you tried that with this solution, you'll find that jQuery searches on the entire label too.
我有同样的问题，但我更喜欢为我的选项（'source'）使用静态选项数组来提高性能。如果您尝试使用此解决方案，您会发现 jQuery 也会搜索整个标签。
EG if you supplied:
EG 如果您提供：
[{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}]
Then typing "span" would match both results, to get it to search on the value only override the $.ui.autocomplete.filterfunction:
然后输入“span”将匹配两个结果，让它搜索值只覆盖$.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)})}
You can edit the last parameter c.valueto anything you want, e.g. c.id || c.label || c.valuewould allow you to search on label, value, or the id.
您可以将最后一个参数编辑为c.value您想要的任何内容，例如c.id || c.label || c.value允许您搜索标签、值或 id。
You can supply as many key/values to autocomplete's source parameter as you want.
您可以根据需要为自动完成的源参数提供任意数量的键/值。
PS: the original parameter is c.label||c.value||c.
PS：原参数为c.label||c.value||c.
回答by Ricketts
I had the issue mentioned by Clarence. I needed to supply HTMLto make a nice appearance with styles and images. This resulted in typing "div" matching all elements.
我遇到了克拉伦斯提到的问题。我需要提供HTML以使用样式和图像来制作漂亮的外观。这导致输入匹配所有元素的“div”。
However, my value was only an ID number, so I couldn't allow the search to run off of just that. I needed the search to look for several values, not just the ID number.
但是，我的值只是一个 ID 号，所以我不能让搜索就这样结束。我需要搜索来查找多个值，而不仅仅是 ID 号。
My solution was to add a new field that held only the search values and check for that in the jQuery UI file. This is what I did:
我的解决方案是添加一个仅包含搜索值的新字段，并在 jQuery UI 文件中进行检查。这就是我所做的：
(This is on jQuery UI 1.9.2; it may be the same on others.)
（这是在 jQuery UI 1.9.2 上；在其他人上可能是一样的。）
Edit filter function on line 6008:
在第 6008 行编辑过滤器功能：
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);
});
}
I added the check for the "value.searchonly" field. If it is there, it uses that field only. If it is not there, it works as normal.
我添加了“value.searchonly”字段的检查。如果存在，则仅使用该字段。如果它不存在，它会正常工作。
Then you use the autocomplete exactly as before, except you can add the "searchonly" key to your JSON object.
然后您可以像以前一样使用自动完成功能，但您可以将“searchonly”键添加到您的 JSON 对象中。
I hope that helps someone!
我希望能帮助别人！
