ユーザーが部分的な名前を入力すると、データベースから一致する完全な名前が検索されるサイトで、jquery オートコンプリート検索機能が機能しています。問題は、一致する場合、次のマークアップを使用して名前の一致を表示できなかったことです。かなり見栄えの悪いデフォルトのオートコンプリートマークアップで動作しています。以下の例では、結果が li に表示される必要があります。
<div class="search_dropdown_wrapper">
<div id="search_arrow" class="dropdown_pointer search"></div>
<ul>
<li>
<a>Sam Cohen</a>
<p>Software Engineer</p>
</li>
</ul>
</div>
上記の div を使用してオートコンプリートで ul をラップするのに問題があります。コードをいじってみましたが、マークアップで結果を部分的に表示するようになりましたが、リンク機能が台無しになり、名前をクリックしてもテキスト ボックスに入力されなくなりました。これが私が使用しているオートコンプリートコードです..
if($('#search_name').length > 0){
$('#search_name').autocomplete({
minLength: 2,
source: '/profiles/jquery_auto_complete_name',
focus: function(event, ui) {
$('#search_name').val(ui.item.first_name + " " + ui.item.last_name);
return false;
},
select: function(event, ui) {
$("#receiver-list").val(ui.item.first_name + " " + ui.item.last_name);
return false;
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append("<a>" + item.first_name + " " + item.last_name + "</a>")
.appendTo( ul );
};
}
(クレジット: How to setup jquery-ui autocomplete in Railsのオートコンプリートの素晴らしい例に感謝します)
ありがとうございました。