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:

• Für jedes gerenderte Element wird ein Regex-Muster erstellt, das wiederverwendet werden kann.
• Für die Formatierung wird der Inline-Stil anstelle der CSS-Klasse verwendet.

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!