Wie heben Sie Suchbegriffe in den Ergebnissen der automatischen Vervollständigung der jQuery-Benutzeroberfläche hervor?

Autocomplete-Plug-in-Ergebnisse anpassen

F: Kann ich Suchbegriffe in den Autocomplete-Dropdown-Ergebnissen hervorheben?

Ja, Sie können das Format der Ergebnisse des Autocomplete-Plug-ins anpassen, um gesuchte Zeichen hervorzuheben.

A: Monkey-Patching des Autocomplete-Widgets

Um diesen Effekt zu erzielen, nutzen Sie Monkey-Patching, eine Technik, bei der eine interne Funktion in einer Bibliothek neu definiert wird. Im Autocomplete-Widget (Version 1.8rc3 der jQuery-Benutzeroberfläche) ist die Funktion _renderItem für die Erstellung der Dropdown-Ergebnisse verantwortlich. So definieren Sie es neu:

function monkeyPatchAutocomplete() {
  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 );
}

B: Groß-/Kleinschreibung mit „$&“ beibehalten

Um die Groß-/Kleinschreibung der übereinstimmenden Zeichenfolgen beizubehalten, ersetzen Sie this.term durch $ & in der Ersetzungsfunktion:

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

C: Einschränkungen

Dieser Hack hat die folgenden Einschränkungen:

• Ein neues RegExp-Objekt wird für jedes in der Liste gerenderte Element erstellt.
• Für die Formatierung wird keine CSS-Klasse verwendet, sodass mehrere Autovervollständigungen auf derselben Seite denselben Stil hätten.

D : Anwenden von Änderungen auf bestimmte Instanzen

Wenn Sie nur eine Autocomplete-Instanz ändern müssen, lesen Sie die folgende Frage: Wie patche ich nur eine Instanz von Autocomplete auf einer Seite?

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