Wie kann ich das Ergebnisanzeigeformat im Autocomplete-Plugin anpassen?

Anpassen des Ergebnisanzeigeformats im Autocomplete-Plugin

Das jQuery UI Autocomplete-Plugin bietet eine leistungsstarke Möglichkeit, Benutzereingaben zu verarbeiten und relevante Optionen vorzuschlagen . Standardmäßig zeigen die Dropdown-Ergebnisse die Übereinstimmungen der Benutzereingaben innerhalb der vorgeschlagenen Elemente an. Möglicherweise wünschen Sie sich jedoch ein individuelleres Format, z. B. die Hervorhebung der Suchzeichen in den angezeigten Ergebnissen.

Monkey-Patching des Plugins

Um dies zu erreichen, können Sie Verwenden Sie die als „Monkey-Patching“ bekannte Technik, bei der Sie eine interne Funktion innerhalb der Bibliothek neu definieren. In diesem Fall müssen Sie die _renderItem-Funktion überschreiben, die für die Erstellung jedes Elements in der Dropdown-Liste verantwortlich ist.

Erstellen der benutzerdefinierten _renderItem-Funktion

Hier ist ein Beispiel dafür eine angepasste _renderItem-Funktion:

$.ui.autocomplete.prototype._renderItem = function( ul, item) {
  var re = new RegExp("^" + this.term);
  var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" + this.term + "</span>");
  return $( "<li></li>" )
    .data( "item.autocomplete", item )
    .append( "<a>" + t + "</a>" )
    .appendTo( ul );
};

Diese Funktion verwendet einen regulären Ausdruck, um die übereinstimmenden Zeichen zu isolieren und sie in ein HTML-Span-Element mit spezifischem Stil einzuschließen. Das span-Element verwendet eine fette Schriftart und eine blaue Farbe, um die Übereinstimmungen hervorzuheben.

Anwenden des Patches

Sobald Sie die benutzerdefinierte Funktion erstellt haben, können Sie sie anwenden das Autocomplete-Widget, indem Sie die folgende Funktion innerhalb des Dokument-Ready-Ereignisses aufrufen:

monkeyPatchAutocomplete();

Diese Funktion ersetzt die Standardfunktion _renderItem durch Ihre benutzerdefinierte Version.

Groß-/Kleinschreibung wird beibehalten

Beachten Sie, dass der obige Code Übereinstimmungen hervorhebt, aber die Groß-/Kleinschreibung der ursprünglichen Eingabe nicht beibehält. Um die Groß-/Kleinschreibung beizubehalten, ändern Sie die Ersetzungszeile innerhalb der _renderItem-Funktion wie folgt:

var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" + "$&amp;" + "</span>");

Gezieltes Patchen

Die oben genannten Änderungen wirken sich auf alle Autocomplete-Widgets auf der Seite aus. Wenn Sie nur eine bestimmte Instanz anpassen möchten, lesen Sie die Frage „Wie patche ich nur eine Instanz von Autocomplete auf einer Seite?“

Das obige ist der detaillierte Inhalt vonWie kann ich das Ergebnisanzeigeformat im Autocomplete-Plugin anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!