前にjQueryUI の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サンプルを使用するように指示しますここ私は運がありませんでした。
提案に 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"}]
ベストアンサー1
コードに以下を追加します:
).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")