Facebookオートコンプリートのような名前と顔を表示するオートコンプリート機能を実装する必要があります。
この投稿ではJquery UI autocomplete - images IN the results overlay, not outside like the demoとその投稿にあるデモでhttp://jsfiddle.net/K5q5U/私はこれを行うための優れた方法を見つけました。
デモでは、ユーザーの検索にStackOverflowのAPIを使用し、その左側にアバターを表示します。 入力フィールドが提示されたとき、私はいくつかの入力フィールドにそれを変更しようとしたときに
が、問題は、それがうまく機能しているということですが、唯一、のみ最初のフィールドは、画像+テキスト、画像から無視され、第2フィールドを表示し、オートコンプリートテキストのみが表示されます。 (私は、データベースからの入力フィールドを取得し、私は高度のフィールドの数である今何いけない)ここJQueryを使って複数のフィールドを含むテキストを自動完成
は、私がどのように私に言うことができる私は
<input class="auto" type="text" />
<input class="auto" type="text" />
$(document).ready(function() {
$(".auto").autocomplete({
source: function (request, response) {
$.ajax({
url: "http://api.stackoverflow.com/1.1/users",
data: {
filter: request.term,
pagesize: 10
},
jsonp: "jsonp",
dataType: "jsonp",
success: function(data) {
response($.map(data.users, function(el, index) {
return {
value: el.display_name,
avatar: "http://www.gravatar.com/avatar/" +
el.email_hash
};
}));
}
});
}
}).data("autocomplete")._renderItem = function (ul, item) {
return $("<li />")
.data("item.autocomplete", item)
.append("<a><img src='" + item.avatar + "' />" + item.value + "</a>")
.appendTo(ul);
};
});
任意のヘルプを使用するコードですそれを調整することができますので、カスタム画像+テキストオートコンプリートはいくつかのフィールドに表示されます非常に感謝されます。
ありがとう、それは問題を解決しました:) –
あなたは私の日を作ってくれてありがとう – ronnieonrails