Jquery UI-Autocomplete mit Bild

Ich bin immer ein Fehler in diesem code. Kann jemand mir helfen?

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

Die Daten korrekt empfangen vom server. Wo habe ich Fehler gemacht?

Welche Art von Fehler? Haben Sie die console?
ich sehe nicht ein bestimmter Fehler in der Konsole. ich entfernte Daten("autocomplete")._renderItem übergeordnete Funktion und geben Sie die "return" in der ajax-block selbst. Dann ist es fein arbeiten. Wenn ich diese _renderItem code-block autosuggessions nicht zu zeigen. Ich möchte das Bild mit dem text. das ist, warum ich fügte hinzu, dass ein Teil
Ich machte eine jsFiddle mit dem code und es scheint gut zu funktionieren.
Jedes update auf dieser?

InformationsquelleAutor Manoj | 2012-10-01

  1. 6

    @ JoeFletch vielen Dank für Ihre Hilfe.

    Ich diese änderungen vorgenommen, um den code und dann funktionierte es gut.
    Hier sind einige css, die ich verwendet. 

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

    Hier ist mein Skript

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


    });

    Danke @Joe. Ich aktualisierte die Antwort.

    InformationsquelleAutor Manoj

  2. 4

    Für alle, die sich das wieder. Der code mjmrz ist fantastisch, aber nur bis zu jQuery-UI-1.8.

    Danach .data("autocomplete") geändert werden muss, um .data("ui-autocomplete") und .data("item.autocomplete", Gegenstand) geändert werden muss, um b .data("ui-autocomplete-item", item).

    Sonst, keine Bilder. Hoffe, dies hilft jemand anderes.

    InformationsquelleAutor Joe Horton

Schreibe einen Kommentar