Jquery UI自动完成图像

Question

我在这段代码中收到错误.有谁能够帮我？

<h4>search:<input type="text" id="name-list" /></h4>
<script type="text/javascript" language="javascript">
$(function () {
        $("#name-list")
    .autocomplete({
        source: function (request, response) {
                $.ajax({
                url: "/Home/Searchuser", type: "POST", dataType: "json",
                data: { searchText: request.term, maxResults: 10 }
            })

            return false;

        },

        minLength: 1

        }).data("autocomplete")._renderItem = function (ul, item) {
        var inner_html = '<a><div class="list_item_container"><div class="image"><img src="' + item.PicLocation + '"></div><div class="label">' + item.label + '</div><div class="description">' + item.DisplayName + '</div></div></a>';
                                 return $("<li></li>")
                                .data("item.autocomplete", item)
                                .append(inner_html)
                                .appendTo(ul);
    };

    });
</script>

数据正在从服务器正确接收.我哪里弄错了？

Answer 1

@ JoeFletch感谢您的帮助.

我对代码进行了这些更改,然后它运行良好.这是我用过的一些css.

<style type="text/css">
DIV.list_item_container {
height: 90px;
padding: 0px;
    }
    DIV.image {
width:90px;
height: 90px;
float: left;
    }
    DIV.description {
font-style: italic;
font-size: 1.1em;
color: gray;
padding: 5px;
margin: 5px;
    }

#name-list
{
    width: 300px;


    }
</style>

这是我的剧本

$(document).ready(function () {
        $('#name-list').autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/Home/Searchuser",
                    data: { searchText: request.term, maxResults: 10 },
                    dataType: "json",
                    success: function (data) {

                        response($.map(data, function (item) {
                            return {
                                value: item.DisplayName,
                                avatar: item.PicLocation,
                                rep: item.Reputation,
                                selectedId: item.UserUniqueid
                            };
                        }))
                    }
                })
            },
            select: function (event, ui) {

                                 alert(ui.item ? ("You picked '" + ui.item.label)
                                                          : "Nothing selected, input was " + this.value);

                return false;
            }
        }).data("ui-autocomplete")._renderItem = function (ul, item) {
            var inner_html = '<a><div class="list_item_container"><div class="image"><img src="' + item.avatar + '"></div><div class="label"><h3> Reputation:  ' + item.rep + '</h3></div><div class="description">' + item.label + '</div></div></a><hr/>';
            return $("<li></li>")
                    .data("ui-autocomplete-item", item)
                    .append(inner_html)
                    .appendTo(ul);
        };


    });

谢谢@Joe.我更新了答案.

Answer 2

对于任何再次看到这个的人。mjmrz 提供的代码非常棒，但仅限于jQuery UI 1.8。

之后.data("autocomplete")需要更改为.data("ui-autocomplete")and .data("item.autocomplete"， item) 需要更改为b .data("ui-autocomplete-item", item)。

否则，没有图像。希望这对其他人有帮助。