Heim > Web-Frontend > js-Tutorial > Hauptteil

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

Barbara Streisand
Freigeben: 2024-10-21 08:03:29
Original
156 Leute haben es durchsucht

How to Highlight Search Terms in jQuery UI Autocomplete Dropdowns?

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);
};
Nach dem Login kopieren

In Ihren Code integrieren

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

monkeyPatchAutocomplete();
Nach dem Login kopieren

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>");
Nach dem Login kopieren

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!

Quelle:php
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!