Wie format JQueryUI AutoVervollständigen Antwort?

Ich versuche, eine autocomplete-widget, das zeigt den Namen und eine kurze Beschreibung der übereinstimmenden Element.

Wenn ich zum Beispiel Typ "Amerika" wird es zeigen "North Amerika - Die nördlichen Subkontinent von Amerika." und "South Amerika - Dem südlichen Subkontinent von Nord-und Südamerika."

Habe ich erfolgreich gemacht, damit meine Datenbank zurück, die entsprechende JSON-response mit der id,dem Wert (der name des Elements, eg. Nordamerika und desc (kurze Beschreibung zB. 'Der nördlichen Subkontinent...'), ich brauche nur Hilfe zum format der zurückgegebenen Ergebnisse als

<li><strong>value<strong><br><p>desc</p></li>

statt nur

<li>value</li>

Vielen Dank im Voraus.

P. S. ich habe versucht, auf der Suche nach einer Antwort auf Stack Overflow, aber die Antworten, die ich gefunden habe beinhalten formatResult und andere Methoden, die nicht mehr unterstützt werden.

InformationsquelleAutor rickypai | 2011-09-03

  1. 8

    http://jqueryui.com/demos/autocomplete/#custom-data - ist die benutzerdefinierten Daten Beispiel auf der jquery ui-Website, was Sie zu erreichen versuchen?

    Danke. Das scheint genau das, was ich Suche. Ich werde Sie wissen lassen, wenn es klappt.
    Habe es funktioniert. Danke.

    InformationsquelleAutor Rezler

  2. 4

    kann dies eine Hilfe sein,ein Blick auf die .data():

    $( "#project" ).autocomplete({
        minLength: 0,
        source: projects,
        focus: function( event, ui ) {
            $( "#project" ).val( ui.item.label );
            return false;
        },
        select: function( event, ui ) {
            $( "#project" ).val( ui.item.label );
            $( "#project-id" ).val( ui.item.value );
            $( "#project-description" ).html( ui.item.desc );
            $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

            return false;
        }
    })
    .data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
            .appendTo( ul );
    };

    InformationsquelleAutor bingjie2680

  3. 3

    Sollten Sie in der Lage sein, verwenden Sie die folgende RegEx zu erreichen das Ergebnis Sie suchen.

    item.label.replace(new RegExp('(' + term + ')', 'ig'), function ($1, match) {
     return '<strong>' + match + '</strong>';
});

    Das vollständige Beispiel finden Sie weiter unten.

    $("#project").autocomplete({
            minLength: 0,
            source: projects,
            focus: function( event, ui ) {
                $( "#project" ).val( ui.item.label );
                return false;
            },
            select: function( event, ui ) {
                $( "#project" ).val( ui.item.label );
                $( "#project-id" ).val( ui.item.value );
                $( "#project-description" ).html( ui.item.desc );
                $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

                return false;
            }
        })
        .data( "autocomplete" )._renderItem = function( ul, item ) {
            var term = this.term,
                        formattedLabel = item.label.replace(new RegExp('(' + term + ')', 'ig'), function ($1, match) {
                            return '<strong>' + match + '</strong>';
                        });
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + formattedLabel + "<br>" + item.desc + "</a>" )
                .appendTo( ul );
        };

    InformationsquelleAutor Derrick

Schreibe einen Kommentar