自分のサイトで jquery オートコンプリートが動作するようになりました。現在、データベースから取得しているデータから画像を表示しようとしています。
ただし、画像データと製品名を取得しているときに、オートコンプリート ドロップダウンに HTML がテキストとして表示されるという問題が発生しました。
誰かが私が間違っているところを見て、正しい方向に向けてくれることを願っています!
$(document).ready(function() {
$(function() {
$( "#autocomplete" ).autocomplete({
source: function(request, response) {
$.ajax({ url: "<?php echo site_url('homepage_products/suggestions'); ?>",
data: { term: $("#autocomplete").val()},
dataType: "json",
type: "POST",
success: function(data){
var data_to_return = new Array();
for (var i = 0; i < data.length; ++i) {
data_to_return.push("<li><a>" + "<img src='" + data[i].image + "' />" + data[i].prodid+ " - " + data[i].product_name+ "</a></li>");
}
response(data_to_return);
}
});
},
minLength: 4
});
});
});
ありがとう！
- - - - - - -編集 - - - - - - -
Spokey の提案の後、次のようにコードを変更し、テキストだけでなく HTML で結果を表示することができました。
$(function() {
$( "#autocomplete" ).autocomplete({
source: function(request, response) {
$.ajax({ url: "<?php echo site_url('homepage_products/suggestions'); ?>",
data: { term: $("#autocomplete").val()},
dataType: "json",
type: "POST",
success: function(data){
var data_to_return = new Array();
for (var i = 0; i < data.length; ++i) {
data_to_return.push("<li><a href = '/shop/products/id/" + (data[i].image).toLowerCase() + ".htm'>" + "<img src='/shop/images/product_thumbs/" + (data[i].image).toLowerCase() + ".jpg' />" + data[i].id + " - " + data[i].name+ "</a></li>");
}
response(data_to_return);
}
});
},
select: function( event, ui ) {
alert(ui.item.value);
window.location.href = ui.item.value;
},
minLength: 2
}).data("autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.image + "</a>")
.appendTo(ul);
};
});
ただし、特定の JavaScript エラーは発生していませんが、画像は表示されません。絶対パスを試してみましたが、それらがサーバーに存在することを確認しましたが、ドロップダウンリストで画像が表示される場所にマウスを移動すると、灰色のボックスが表示されます.
うまくいけば、誰かが私の間違いを見つけることができます!
私はまた、私が非常に便利だと思ったリンクについてもこれを見つけました。同様のことを達成しようとしている他の人にお勧めします。
-------------最終修正-------------
おっと-結局私はばかだった-私は電話をしていた
item.image
電話するべきだったとき
item.label
助けてくれてありがとう！