Wie heben Sie Suchbegriffe in Dropdown-Listen mit automatischer Vervollständigung der jQuery-Benutzeroberfläche hervor?

Anpassen der Ergebnisse des Autocomplete-Plug-ins

Das jQuery UI Autocomplete-Plug-in bietet eine breite Palette an Funktionen, die jedoch möglicherweise nicht immer erfüllt werden Ihre genauen Formatierungsanforderungen. Wenn Sie Suchzeichenfolgen in Dropdown-Ergebnissen hervorheben müssen, können Sie die Flexibilität des Plug-ins wie folgt nutzen:

Monkey-Patching des Autocomplete-Plug-ins

The Der Schlüssel zum Anpassen der Ergebnisse besteht darin, die Standardfunktion _renderItem zu ersetzen, die die Dropdown-Listenelemente generiert. Sie können dies durch eine Technik namens „Monkey-Patching“ erreichen. Durch Definieren einer neuen _renderItem-Funktion können Sie die Ergebnisse im gewünschten Format rendern.

Implementierung

Das folgende Codebeispiel stellt eine erweiterte Version der _renderItem-Funktion bereit, die formatiert passende Zeichenfolgen mit fett gedrucktem Text:

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

In Ihren Code integrieren

Rufen Sie die Funktion „monkeyPatchAutocomplete“ im Block $(document).ready(...) auf einmal, um die benutzerdefinierte Formatierung zu aktivieren:

monkeyPatchAutocomplete();

Einschränkungen

Diese Technik bietet zwar grundlegende Funktionen, weist jedoch einige Einschränkungen auf:

• Für jedes Element wird ein separates Regexp-Objekt erstellt, das aus Effizienzgründen optimiert werden könnte.
• Die Formatierung verwendet Inline-Stile, die sich auf die Konsistenz über mehrere Autovervollständigungs-Widgets auf derselben Seite auswirken können.

Groß-/Kleinschreibung beibehalten

Um die ursprüngliche Groß-/Kleinschreibung der Suchzeichen beizubehalten, anstatt sie mit den eingegebenen Zeichen abzugleichen, verwenden Sie „$&“ anstelle von „this.term“ im Code:

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

Das obige ist der detaillierte Inhalt vonWie heben Sie Suchbegriffe in Dropdown-Listen mit automatischer Vervollständigung der jQuery-Benutzeroberfläche hervor?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!