Używam wtyczki jQuery UI Autocomplete . Czy istnieje sposób wyróżnienia sekwencji znaków wyszukiwania w rozwijanych wynikach?
Na przykład, jeśli mam „foo bar” jako dane i wpiszę „ foo ”, w menu rozwijanym pojawi się „ foo bar”, na przykład:
źródło
Używam wtyczki jQuery UI Autocomplete . Czy istnieje sposób wyróżnienia sekwencji znaków wyszukiwania w rozwijanych wynikach?
Na przykład, jeśli mam „foo bar” jako dane i wpiszę „ foo ”, w menu rozwijanym pojawi się „ foo bar”, na przykład:
Tak, możesz, jeśli automatycznie uzupełniasz małpy.
W widgecie autouzupełniania zawartym w wersji 1.8rc3 interfejsu użytkownika jQuery wyskakujące okienko sugestii jest tworzone w funkcji _renderMenu widżetu autouzupełniania. Ta funkcja jest zdefiniowana w następujący sposób:
_renderMenu: function( ul, items ) {
var self = this;
$.each( items, function( index, item ) {
self._renderItem( ul, item );
});
},
Funkcja _renderItem jest zdefiniowana w następujący sposób:
_renderItem: function( ul, item) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
},
Musisz więc zastąpić _renderItem fn własną kreacją, która daje pożądany efekt. Technika ta, redefiniująca wewnętrzną funkcję w bibliotece, której nauczyłem się, nazywa się małpą łataniem . Oto jak to zrobiłem:
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 );
};
}
Wywołaj tę funkcję raz w $(document).ready(...)
.
To jest hack, ponieważ:
istnieje wyrażenie regularne obj. utworzone dla każdego elementu wyświetlanego na liście. To wyrażenie regularne obj powinno zostać ponownie użyte dla wszystkich pozycji.
nie ma klasy css używanej do formatowania ukończonej części. To styl inline.
Oznacza to, że jeśli masz wiele autouzupełniania na tej samej stronie, wszystkie zostaną potraktowane tak samo. Styl CSS rozwiązałby ten problem.
... ale ilustruje główną technikę i działa zgodnie z Twoimi podstawowymi wymaganiami.
zaktualizowany przykład roboczy: http://output.jsbin.com/qixaxinuhe
Aby zachować wielkość liter w pasujących łańcuchach, zamiast używać wielkości liter w wpisywanych znakach, użyj tej linii:
var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" +
"$&" +
"</span>");
Innymi słowy, zaczynając od oryginalnego kodu powyżej, wystarczy zastąpić this.term
go "$&"
.
EDYTUJ
Powyższe zmienia wszystkie widżety autouzupełniania na stronie. Jeśli chcesz zmienić tylko jedną, zobacz to pytanie:
Jak załatać * tylko jedną * instancję autouzupełniania na stronie?
var re = new RegExp(this.term, "i");
Świetny post!to też działa:
połączenie odpowiedzi @ Jörn Zaefferer i @ Cheeso.
źródło
$().autocomplete()
Super pomocny. Dziękuję Ci. +1.
Oto uproszczona wersja z sortowaniem „Ciąg musi zaczynać się od terminu”:
źródło
Oto pełny, funkcjonalny przykład:
Mam nadzieję że to pomoże
źródło
jQueryUI 1.9.0 zmienia sposób działania _renderItem.
Poniższy kod bierze pod uwagę tę zmianę, a także pokazuje, jak robiłem dopasowywanie podświetlenia za pomocą wtyczki jQuery Autocomplete Jörna Zaefferera. Podświetli wszystkie poszczególne terminy w ogólnym wyszukiwaniu.
Odkąd zacząłem używać Knockout i jqAuto, stwierdziłem, że jest to znacznie łatwiejszy sposób na stylizowanie wyników.
źródło
.jqAutocompleteMatch { font-weight: bold; }
this.term
Przed wykonaniem jakiegokolwiek przetwarzania należy użyć logiki ucieczki przed wyrażeniem regularnym for. Zobacz Escape string for use in JavaScript regex jako jedną z wielu odpowiedzi, jak to zrobić.aby uzyskać jeszcze łatwiejszy sposób, spróbuj tego:
źródło
Oto powtórzenie rozwiązania Teda de Koninga. Obejmuje:
źródło
Oto wersja, która nie wymaga żadnych wyrażeń regularnych i pasuje do wielu wyników na etykiecie.
źródło
Spójrz na demo combobox, zawiera wyróżnianie wyników: http://jqueryui.com/demos/autocomplete/#combobox
Używane tam wyrażenie regularne dotyczy również wyników html.
źródło
Oto moja wersja:
Podświetl przykład dopasowanego tekstu
źródło
możesz użyć następującego kodu:
lib:
i logika:
tworzy niestandardowy widget, który może zastąpić oryginalny prototyp wtyczki
_renderItem
bez nadpisywania_renderItem
.w moim przykładzie wykorzystałem również oryginalną funkcję renderującą do uproszczenia kodu
jest to ważne, jeśli chcesz używać wtyczki w różnych miejscach z innym widokiem autouzupełniania i nie chcesz łamać kodu.
źródło
Jeśli zamiast tego użyjesz wtyczki innej firmy, ma ona opcję podświetlenia: http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions
(patrz zakładka Opcje)
źródło
Aby obsługiwać wiele wartości, po prostu dodaj następującą funkcję:
źródło