Heim >Web-Frontend >js-Tutorial >Wie kann ich die Anzeige des Autocomplete-Plugins mit fetter Übereinstimmungshervorhebung anpassen?
Anpassen der Anzeige der Autocomplete-Plugin-Ergebnisse mit fetter Übereinstimmungshervorhebung
Im Autocomplete-Plugin der jQuery-Benutzeroberfläche verbessert die Hervorhebung von Suchbegriffen in Dropdown-Ergebnissen den Benutzer Erfahrung. In diesem Artikel wird erläutert, wie Sie diese Anzeige an spezifische Anforderungen anpassen können.
Lösung: Monkey-Patching
Monkey-Patching, eine Technik zur Neudefinition interner Bibliotheksfunktionen, bietet eine Lösung. Das Überschreiben der _renderItem-Funktion, die Listenelemente für Vorschläge generiert, ermöglicht ein benutzerdefiniertes Rendering.
Hier ist der Monkey-Patching-Code, der den übereinstimmenden Teil der Ergebnisse fett hervorhebt:
<code class="javascript">function monkeyPatchAutocomplete() { $.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); }; }</code>
Rufen Sie diese Funktion in $(document).ready(..) auf:
<code class="javascript">$(document).ready(function() { monkeyPatchAutocomplete(); });</code>
Überlegungen:
Dieser Hack-Ansatz hat einige Einschränkungen:
Trotz dieser Einschränkungen ist die Die Technik hebt passende Begriffe in Dropdown-Ergebnissen effektiv hervor und erfüllt so die gewünschte Anforderung.
Das obige ist der detaillierte Inhalt vonWie kann ich die Anzeige des Autocomplete-Plugins mit fetter Übereinstimmungshervorhebung anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!