2

写真と一緒に自動入力テキストを使用して、自分のWebサイトに検索ボックスを実装したいと思います。

これが私の現在のコードです：

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およびその他の情報をコントローラーからビューに渡します。テキストは正常に機能しています。

画像をレンダリングしてリストアイテムに追加する方法を教えてもらえますか？

4

1 に答える 1

0

コードにこれらの変更を加えたところ、うまく機能しました。

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);
    };
});
于 2012-10-04T11:56:50.480 に答える