Wie kann ich die Ergebnisformatierung des Autocomplete-Plugins in der jQuery-Benutzeroberfläche anpassen?

Anpassen der Ergebnisformatierung des Autocomplete-Plugins

Bei der Verwendung des beliebten jQuery UI Autocomplete-Plugins kann es erforderlich sein, bestimmte Zeichenfolgen im zu markieren Dropdown-Ergebnisse zur Verbesserung der Benutzererfahrung. In diesem Artikel wird erläutert, wie Sie diesen Effekt erzielen.

Monkey-Patching des Autocomplete-Widgets

Um die Ergebnisformatierung anzupassen, müssen Sie die Standardfunktion _renderItem von ersetzen das Autovervollständigungs-Widget. Diese Funktion ist für die Erstellung jedes Elements in der Dropdown-Liste verantwortlich. Durch Überschreiben können Sie das Erscheinungsbild des Elements ändern, um eine benutzerdefinierte Formatierung einzuschließen.

Hier ist ein Beispiel für einen solchen Monkey-Patch:

  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 );
      };
  }

Rufen Sie diese Funktion einmal im $(Dokument) auf. ready(...) Ereignishandler zum Aktivieren der Anpassung.

Umgang mit der Groß-/Kleinschreibung

Wenn Sie die Groß-/Kleinschreibung der Übereinstimmungszeichenfolgen beibehalten möchten, anstatt sie zu verwenden Verwenden Sie für die eingegebenen Zeichen diese Zeile:

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

Einschränkungen

Mit dieser Methode können Sie zwar den Suchbegriff in den Dropdown-Ergebnissen hervorheben, es ist aber auch möglich, den Suchbegriff in den Dropdown-Ergebnissen hervorzuheben hat Einschränkungen:

• Jedes Autovervollständigungs-Widget auf der Seite ist betroffen.
• Der Begriff wird mit Inline-Stil anstelle einer CSS-Klasse hervorgehoben.

Zusätzliche Hinweise

Wenn Sie nur eine bestimmte Instanz des Autocomplete-Widgets auf einer Seite anpassen müssen, können Sie einen gezielteren Ansatz verwenden. Weitere Informationen finden Sie in der Dokumentation.

Das obige ist der detaillierte Inhalt vonWie kann ich die Ergebnisformatierung des Autocomplete-Plugins in der jQuery-Benutzeroberfläche anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!