JQuery: implementace vyhledání v statickém html

MyEgo.cz

home foto blogy mywindows.cz kontakt

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:

  1. 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
  2. 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.

 

 


Komentáře

  1. 1 SpinGee 10.02.09, 04:53:07
    FB

    Supr články, jen tak dál!
    Btw jQuery team koupil Microsoft a ve VS2010 bude v základu.

Nový komentář

Pro přidání komentáře se musíte nejdříve  registrovat Facebookem

Banan.cz