wake-up-neo.com

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 etwas machen 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 besagt, dass ich das benutzerdefinierte HTML-Beispiel verwenden soll hier , mit dem ich kein Glück hatte.

Wie kann ich erreichen, 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 das folgende:

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

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

116
Kieran Andrews

Dies ist auch in der Dokumentation zum automatischen Vervollständigen 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 übergeben Sie in der Autocomplete-Option 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 (Scott González 'html-Erweiterung) in einer js-Datei oder laden Sie die js-Datei herunter.
  2. Sie haben das Skript für die automatische Vervollständigung von jquery-ui bereits in Ihre HTML-Seite (oder in die jquery-ui-js-Datei) eingefügt. Fügen Sie dieses Plugin-Skript nach der automatischen Vervollständigung der Javascript-Datei hinzu.
10
Wasiq

Diese Lösung wird nicht empfohlen, Sie können jedoch 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)},
1
revoke

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 das mit dieser Lösung versucht haben, werden Sie feststellen, dass jQuery auch auf dem gesamten Etikett sucht.

ZB wenn Sie folgendes angegeben haben:

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

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

$.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.value Nach Belieben bearbeiten, z. Mit c.id || c.label || c.value Können Sie nach Label, Wert oder der ID suchen.

Sie können dem Quellparameter von autocomplete beliebig viele Schlüssel/Werte zuweisen.

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

0
Clarence Liu

Ich hatte das von Clarence erwähnte Problem. Ich musste HTML bereitstellen, um mit Stilen und Bildern einen schönen Auftritt zu erzielen. Dies führte dazu, dass "div" für alle Elemente eingegeben wurde.

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

(Dies ist in jQuery UI 1.9.2 der Fall; dies kann auch in anderen Fällen 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 Autovervollständigung genau wie zuvor, außer dass Sie Ihrem JSON-Objekt den Schlüssel "searchonly" hinzufügen können.

Ich hoffe das hilft jemandem!

0
Ricketts