JavaScriptでオートコンプリート機能を実装する場合、
jQueryUIにAutocompleteという便利な機能があります。
http://jqueryui.com/autocomplete/
しかし、jQueryUIのAutocompleteで表示する候補リストは
テキストでしか表示できないようになっています。
なのでfacebookの友だち検索ような画像とテキストを組み合わせた
候補をリストで出すことは不可能です。
（htmlの文字列はエスケープされてしまう。）
そこでjQueryUIネイティブの_renderItem()関数を置き換えることで
htmlタグを利用できるようにします。
$.ui.autocomplete.prototype._renderItem = function( t, n) {
return $( "<li></li>" )
.data( "item.autocomplete", n )
.append( $( "<a></a>" ).html( n.label ) )
.appendTo( t );
};
元の関数はこんな感じでaタグで挟むところをtext()でなくhtml()を利用しています。
_renderItem: function(t, n) {
return e("<li>").append(e("<a>").text(n.label)).appendTo(t)
}
サンプルHTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" charset="utf-8">
jQuery(function($) {
$.ui.autocomplete.prototype._renderItem = function(ul, item) {
return $("<li></li>").data("item.autocomplete", item).append($("<a></a>").html(item.label)).appendTo(ul);
};
$('#widget').autocomplete({
source : function(request, response) {
//なにかしらのRequest
$.getJSON(url, params, function(data) {
var list = [];
for (var key in data ) {
var item = data[key];
//labelにhtmlを設定
list.push({
label : "<img width=\"24\" height=\"24\" src=\"" + item.image + ".png\" \/><span class=\"username\">" + item.username + "<\/span>",
value : item.value
});
}
response(list);
});
}
});
});
</script>
</head>
<body id="body">
<input type="text" id="widget" name="txt" />
</body>
</html>