Question

我已经在我的网站上运行了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
    });
});

}）;

谢谢！

------------- ------------- EDIT

好的，在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错误，但图片没有出现。我已经尝试过绝对路径，并且我已经检查过它们确实存在于服务器上 - 但是当我将鼠标滚到图片应该出现在下拉列表中的位置时，我得到的只是一个灰色框。

希望有人能发现我的错误！

我也发现这个链接我觉得非常有用，并且我认为我推荐给其他试图达到类似效果的人：

JQuery Autocomplete Where the Results are Links

------------- FINAL FIX -------------

哎呀 - 最后我是个白痴 - 我正在打电话

item.image

我什么时候应该打电话

item.label

感谢您的帮助！

Jquery在返回的数据中自动完成图像

0 个答案: