Verwenden von HTML in der automatischen Vervollständigung der jQuery-Benutzeroberfläche

Vor jQuery UI 1.8.4 konnte ich HTML in dem JSON-Array verwenden, das ich für die Arbeit mit einer automatischen Vervollständigung erstellt habe.

Ich konnte so etwas tun wie:

$row_array['label'] = '<span style="color: red; font-family: courier;">User, Name</span>';

Das würde als roter Text in der Dropdown-Liste angezeigt.

Ab 1.8.4 funktioniert das nicht. Ich habe http://dev.jqueryui.com/ticket/5275 gefunden, das mir sagt, dass ich hier das benutzerdefinierte HTML-Beispiel verwenden soll, mit dem ich kein Glück hatte.

Wie kann ich dafür sorgen, dass HTML im Vorschlag angezeigt wird?

Meine jQuery ist:

<script type="text/javascript">
    $(function() {
        $("#findUserIdDisplay").autocomplete({
            source: "ui_autocomplete_users_withuname.php",
            minLength: 2,
            select: function(event, ui) {
                $('#findUserId').val(ui.item.id);
            }
        });
    });
</script>

Mein JSON-Array enthält HTML wie folgt:

[{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}]

Fügen Sie dies Ihrem Code hinzu:

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

So wird Ihr Code:

<script type="text/javascript">
 $(function () {
     $("#findUserIdDisplay").autocomplete({
         source: "ui_autocomplete_users_withuname.php",
         minLength: 2,
         select: function (event, ui) {
             $('#findUserId').val(ui.item.id);
             return false;
         }
     }).data("ui-autocomplete")._renderItem = function (ul, item) {
         return $("<li></li>")
             .data("item.autocomplete", item)
             .append("<a>" + item.label + "</a>")
             .appendTo(ul);
     };
 });
</script>

Hinweis: Verwenden Sie in alten Versionen von jQueryUI .data("autocomplete")"anstelle von.data("ui-autocomplete")

Dies ist auch in der Dokumentation zur automatischen Vervollständigung von jquery-ui unter folgender Adresse dokumentiert: http://api.jqueryui.com/autocomplete/#option-source

Der Trick ist:

1. Verwenden Sie diese jQuery-UI-Erweiterung
2. Dann in Autocomplete Option übergeben autocomplete({ html:true});
3. Jetzt können Sie HTML <div>sample</div>im Feld "label" der JSON-Ausgabe für die automatische Vervollständigung übergeben.

Wenn Sie nicht wissen, wie Sie das Plugin zur JQuery-Benutzeroberfläche hinzufügen können, gehen Sie wie folgt vor:

1. Speichern Sie das Plugin (die HTML-Erweiterung von Scott González) in einer JS-Datei oder laden Sie die JS-Datei herunter.
2. Sie haben das Skript zur automatischen Vervollständigung von jquery-ui bereits zu Ihrer HTML-Seite (oder zur js-Datei von jquery-ui) hinzugefügt. Fügen Sie dieses Plugin-Skript nach dieser Javascript-Datei mit automatischer Vervollständigung hinzu.

Diese Lösung wird nicht empfohlen, aber Sie können einfach die Quelldatei jquery.ui.autocomplete.js (v1.10.4) bearbeiten.

Original:

_renderItem:function(t,i){return e("<li>").append(e("<a>").text(i.label)).appendTo(t)},

Fest:

_renderItem:function(t,i){return e("<li>").append(e("<a>").html(i.label)).appendTo(t)},

Ich hatte das gleiche Problem, aber ich bevorzuge es, ein statisches Array von Optionen für meine Option ('Quelle') für die Leistung zu verwenden. Wenn Sie dies mit dieser Lösung versucht haben, werden Sie feststellen, dass jQuery auch auf dem gesamten Etikett sucht.

EG wenn Sie geliefert haben:

[{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}]

Wenn Sie dann "span" eingeben, stimmen beide Ergebnisse überein, damit die Suche nach dem Wert nur die $.ui.autocomplete.filterFunktion überschreibt :

$.ui.autocomplete.filter = function(a,b){var g=new RegExp($.ui.autocomplete.escapeRegex(b),"i");return $.grep(a,function(c){return g.test(c.value||c)})}

Sie können den letzten Parameter c.valuenach Belieben bearbeiten , z. B. c.id || c.label || c.valueum nach Beschriftung, Wert oder ID zu suchen.

Sie können so viele Schlüssel / Werte für den Quellparameter der automatischen Vervollständigung angeben, wie Sie möchten.

PS: Der ursprüngliche Parameter ist c.label||c.value||c.

Ich hatte das von Clarence erwähnte Problem. Ich musste HTML bereitstellen , um ein schönes Erscheinungsbild mit Stilen und Bildern zu erzielen. Dies führte dazu, dass "div" eingegeben wurde, das allen Elementen entspricht.

Mein Wert war jedoch nur eine ID-Nummer, sodass ich nicht zulassen konnte, dass die Suche genau danach abläuft. Ich brauchte die Suche, um nach mehreren Werten zu suchen, nicht nur nach der ID-Nummer.

Meine Lösung bestand darin, ein neues Feld hinzuzufügen, das nur die Suchwerte enthielt, und dies in der jQuery-UI-Datei zu überprüfen. Das habe ich getan:

(Dies ist auf jQuery UI 1.9.2 der Fall; auf anderen kann dies auch der Fall sein.)

Filterfunktion in Zeile 6008 bearbeiten:

filter: function (array, term) {
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i");
        return $.grep(array, function (value) {
            if (value.searchonly == null)
                return matcher.test(value.label || value.value || value);
            else
                return matcher.test(value.searchonly);
        });
    }

Ich habe die Prüfung für das Feld "value.searchonly" hinzugefügt. Wenn es dort ist, wird nur dieses Feld verwendet. Wenn es nicht da ist, funktioniert es wie gewohnt.

Dann verwenden Sie die automatische Vervollständigung genau wie zuvor, außer dass Sie Ihrem JSON-Objekt den Schlüssel "Nur Suchen" hinzufügen können.

Ich hoffe das hilft jemandem!