JQuery: implementace vyhledání v statickém html
Tak jak se seznamuji s JQuery...tak zjišťuji, že se s tím opravdu dají dělat pěkné kejkle. Potřeboval jsem nějak implementovat jednoduché pseudo vyhledávání. Píši pseudo, jelikož mi šlo jen o zvýraznění vyhledaného textu. Původně jsem představoval, že zvýrazním vždy jednotlivé slovo, ale pak jsem tomu něco obětoval a zvýrazňuji jenom odstavec. I tak jde o efektní výsledek, vzhledem k tomu, že všechno probíhá na klientovy. A jak, že to vlastně funguje...
Původní idea je převzata z blogu Rick Strahl's Web blog.
Přibližný popis funkce:
- Pomocí odebírání události keyup docílíme reakci na každé přidané či odebrané písmeno ve vyhledávacím inputu
- V reakci na keyup provedeme dvě akce. odstraníme námi definovaný class z předchozí iterace a v druhém kroku aplikujeme class na vybrané elementy.
JQuery má implementovanou funkci contains, které filtruje vybrané elementy s daným kriteriem, přibližné použití je takovéto:
$("#txtSearch").keyup(function() { $("p").removeClass("selectionhighlight"); $("p:contains(" + this.value + ")").addClass("selectionhighlight"); });Jelikož contains rozlišuje malé a velké písmena tak se moc nehodí na vyhledávání textu, jelikož toho moc nenajde....naštěstí pro mě, pro vás Rick v článku zmiňuje možnost vytvoření vlastního filtru.
Implementace:
$.expr[":"].containsNoCase = function(el, i, m) {
var search = m[3];
if (!search) return false;
return eval("/" + search + "/i").test($(el).text());
};a použití:
$("p").addClass("selectionhighlight");A tady je pak celá implementace...pěkně dohromady.
$(document).ready(function(){
var hArea = "input[id*='txtSearch']";
var hclass = "highlight";
var htarget = "div#left>div>p";
$.expr[":"].startsWith = function(el, i, m) {
var search = m[3];
if (!search) return false;
return eval("/" + search + "/i").test($(el).text());
};
$(hArea).keyup(function() {
$(htarget).removeClass(hclass);
$(htarget + ":startsWith(" + this.value + ")").addClass(hclass);
});
});Celý příklad v zipu včetně html kódu a zkušebního textu: JQuery_search.zip
Poznámka pod čarou: Bohužel teď jsem dost na štíru s vývojem SCSF aplikace ale snad se k ní brzo vrátím, tak se zde snad časem zase začnou objevovat články s SCSF. Nerad bych skončil ve skupině projektů, které nedojdou k prvnímu releasu.
Supr články, jen tak dál!
Btw jQuery team koupil Microsoft a ve VS2010 bude v základu.