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

83

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"}]
Jason
quelle
2
Ich hätte auch gerne eine Antwort, ich bin gerade auf das gleiche Problem gestoßen.
Kieran Andrews

Antworten:

119

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

Kieran Andrews
quelle
Was macht _renderItem? Konvertiert das den HTML-Code?
Jason
2
forum.jquery.com/topic/using-html-in-autocomplete Siehe den zweiten Beitrag, er beschreibt alles.
Kieran Andrews
7
Verwenden Sie in neuen Versionen von jQuery ui .data ("ui-autocomplete"), nicht data ("autocomplete")
Mike Starov,
1
Wenn Sie das entfernen <a>, können Sie das Element nicht anklicken / scrollen.
Piotr Kula
Du bist ein Lebensretter. Ich möchte Ihre Antwort überprüfen! :)
Sri Harsha Kappala
10

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 &lt;div&gt;sample&lt;/div&gt;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.
Wasiq
quelle
2

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)},
widerrufen
quelle
0

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.

Clarence Liu
quelle
Zu Ihrer Information: Sie benötigen diese Lösung nicht, wenn Sie AJAX als Quelle verwenden, da Sie sowieso für das Filtern mit dem übergebenen Suchbegriff verantwortlich sind
Clarence Liu
0

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!

Ricketts
quelle
2
@PeterMortensen Ich habe gesagt, dass Sie es so bearbeitet haben, dass es einen Wikipedia-Link zu HTML enthält.
Dan Atkinson