Question

我想在我的网站中实现一个搜索框，其中包含自动填充文本和照片。

这是我目前的代码：

HTML ：

<h4>search:<input type="text" id="name-list" /></h4>

的JavaScript ：

$(function () {
    $("#name-list").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/Home/Searchuser",
                type: "POST",
                dataType: "json",
                data: {
                    searchText: request.term,
                    maxResults: 10
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.DisplayName + " R:" + item.Reputation,
                            value: item.DisplayName,
                            id: item.Id
                        }
                    }))
                }
            })
        },
        select: function (event, ui) {
            alert(ui.item ? ("You picked '" + ui.item.label + "' with an ID of " + ui.item.id) : "Nothing selected, input was " + this.value);
        }
    });
});

我正在使用ASP.NET MVC2，并且我将json字符串（在查询本地数据库之后）传递了图像url以及从控制器到视图的其他信息。文字工作正常。

有人可以帮我如何渲染图像并附加到列表项吗？

Answer 1

我对代码进行了这些更改，然后它运行良好。

<强> 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;
}

<强>的JavaScript ：

$(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("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("item.autocomplete", item)
            .append(inner_html)
            .appendTo(ul);
    };
});

如何使用图像和文本实现自动完成搜索框

1 个答案: