之前jQuery UI 1.8.4 我可以使用 HTML在我构建的 JSON 数组中使用自动完成功能。
我能够做类似的事情:
$row_array['label'] = '<span style="color: red; font-family: courier;">User, Name</span>';
这将在下拉列表中显示为红色文本。
从 1.8.4 开始,这不起作用。我找到了 http://dev.jqueryui.com/ticket/5275这告诉我使用自定义 HTML 示例 here我没有运气。
我怎样才能让 HTML 显示在建议中?
我的 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")
关于html - 在 jQuery UI 自动完成中使用 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3488016/