Ja, Sie können, wenn Sie Affen-Patch automatisch vervollständigen.
In dem in v1.8rc3 der jQuery-Benutzeroberfläche enthaltenen Widget für die automatische Vervollständigung wird das Popup mit Vorschlägen in der Funktion _renderMenu des Widgets für die automatische Vervollständigung erstellt. Diese Funktion ist wie folgt definiert:
_renderMenu: function( ul, items ) {
var self = this;
$.each( items, function( index, item ) {
self._renderItem( ul, item );
});
},
Die Funktion _renderItem ist wie folgt definiert:
_renderItem: function( ul, item) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
},
Sie müssen also das _renderItem fn durch Ihre eigene Kreation ersetzen, die den gewünschten Effekt erzeugt. Diese Technik, die eine interne Funktion in einer Bibliothek neu definiert, wird als Affen-Patching bezeichnet . So habe ich es gemacht:
function monkeyPatchAutocomplete() {
// don't really need this, but in case I did, I could store it and chain
var oldFn = $.ui.autocomplete.prototype._renderItem;
$.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 auf $(document).ready(...)
.
Nun, das ist ein Hack, weil:
Für jedes in der Liste gerenderte Element wird ein reguläres Ausdrucksobjekt erstellt. Dieses reguläre Ausdrucksobjekt sollte für alle Elemente wiederverwendet werden.
Für die Formatierung des fertigen Teils wird keine CSS-Klasse verwendet. Es ist ein Inline-Stil.
Das heißt, wenn Sie mehrere Autovervollständigungen auf derselben Seite hätten, würden alle die gleiche Behandlung erhalten. Ein CSS-Stil würde das lösen.
... aber es veranschaulicht die Haupttechnik und funktioniert für Ihre Grundanforderungen.
aktualisiertes Arbeitsbeispiel: http://output.jsbin.com/qixaxinuhe
Verwenden Sie diese Zeile, um die Groß- und Kleinschreibung der Übereinstimmungszeichenfolgen beizubehalten, anstatt die Groß- und Kleinschreibung der eingegebenen Zeichen zu verwenden:
var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" +
"$&" +
"</span>");
Mit anderen Worten, von dem ursprünglichen Startcode oben, müssen Sie nur zu ersetzen , this.term
mit "$&"
.
BEARBEITEN
Das Obige ändert jedes Autocomplete-Widget auf der Seite. Wenn Sie nur eine ändern möchten, lesen Sie die folgende Frage:
Wie kann * nur eine * Instanz von Autocomplete auf einer Seite gepatcht werden?
var re = new RegExp(this.term, "i");
Toller Beitrag!das funktioniert auch:
eine Kombination aus den Antworten von @ Jörn Zaefferer und @ Cheeso.
quelle
$().autocomplete()
Super hilfreich. Danke dir. +1.
Hier ist eine Light-Version, die nach "String muss mit dem Begriff beginnen" sortiert wird:
quelle
Hier geht es, ein funktionales vollständiges Beispiel:
Hoffe das hilft
quelle
jQueryUI 1.9.0 ändert die Funktionsweise von _renderItem.
Der folgende Code berücksichtigt diese Änderung und zeigt auch, wie ich den Highlight-Abgleich mit dem jQuery Autocomplete-Plugin von Jörn Zaefferer durchgeführt habe. Es werden alle einzelnen Begriffe im gesamten Suchbegriff hervorgehoben.
Seit ich Knockout und jqAuto verwendet habe, war es für mich viel einfacher, die Ergebnisse zu gestalten.
quelle
.jqAutocompleteMatch { font-weight: bold; }
this.term
jeder Verarbeitung sollte eine Logik verwendet werden, um dem regulären Ausdruck zu entkommen . Siehe Escape-Zeichenfolge zur Verwendung in Javascript-Regex als eine von vielen Antworten darauf.Versuchen Sie Folgendes, um es noch einfacher zu machen:
quelle
Hier ist eine Wiederholung der Lösung von Ted de Koning. Es enthält :
quelle
Hier ist eine Version, die keine regulären Ausdrücke erfordert und mit mehreren Ergebnissen in der Bezeichnung übereinstimmt.
quelle
Schauen Sie sich die Combobox-Demo an, die eine Hervorhebung der Ergebnisse enthält: http://jqueryui.com/demos/autocomplete/#combobox
Der dort verwendete Regex befasst sich auch mit HTML-Ergebnissen.
quelle
Hier ist meine Version:
Markieren Sie das passende Textbeispiel
quelle
Sie können folgenden Code verwenden:
lib:
und Logik:
Es wird ein benutzerdefiniertes Widget erstellt, das überschrieben
_renderItem
werden kann, ohne den_renderItem
ursprünglichen Plugin-Prototyp zu überschreiben .In meinem Beispiel wurde auch die ursprüngliche Renderfunktion verwendet, um den Code zu vereinfachen
Es ist wichtig, wenn Sie das Plugin an verschiedenen Stellen mit unterschiedlicher Ansicht der automatischen Vervollständigung verwenden und Ihren Code nicht beschädigen möchten.
quelle
Wenn Sie stattdessen das Plugin eines Drittanbieters verwenden, gibt es eine Hervorhebungsoption: http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions
(siehe Registerkarte Optionen)
quelle
Um mehrere Werte zu unterstützen, fügen Sie einfach die folgende Funktion hinzu:
quelle