jQuery UI的自动完成与图片 [英] Jquery UI Autocomplete with Image

问题描述

我在这个code得到一个错误。有谁能够帮助我？

I am getting an error in this code. Can anybody help me?

<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>

的数据被正确地从服务器接收。我在哪里出错了？

The data is receiving correctly from the server. Where have i made mistake?

推荐答案

@ JoeFletch感谢您的帮助。

@ JoeFletch Thanks for your help.

我做了这些更改code，然后将它运作良好。
下面是一些CSS我用。

I made these changes to the code and then it worked well. Here are some css i used.

<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("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);
        };


    });

这篇关于jQuery UI的自动完成与图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！