0

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

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

我还发现这个链接非常有用，并认为我会推荐给其他试图实现类似目标的人：

JQuery 自动完成，其中结果是链接

-------------最终修复-------------

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

item.image

我应该打电话的时候

item.label

谢谢您的帮助！

4

0 回答 0