CSS vyhledávání a filtrování

Kromě filtrování pomocí radio přepínačů na to lze jít ještě jinak — dle potřeby vygenerovat JavaScriptem CSS kód, který pomocí tříd nebo pokročilých selektorů zvýrazní vyhovující obsah / skryje nevyhovující.

Připojení CSS pomocí JavaScriptu

V novějších prohlížečích (novější než IE 7) stačí měnit innerHTML značky <style>.

<style id=js-styl></style>
<p id=cerveny class=cerveny>Text, který JS přebarví na červenou.
<script>
document.getElementById("js-styl").innerHTML = "p.cerveny {color: red}"
</script>

Ukázka

Text, který JS přebarví na červenou.

Starší Internet Explorery

Ve starších IE funguje tato šílenost:

var css = "p.zeleny {color: green}";
var pomocnyDiv = document.createElement('div');
pomocnyDiv.innerHTML = '<p>jen tak</p><style>' + css + '</style>';
document.getElementsByTagName('head')[0].appendChild(pomocnyDiv.childNodes[1]);

Ukázka

Text, který JS přebarví na zelenou i ve starých prohlížečích.

Filtrování

Nyní už stačí přidat jednotlivým položkám CSS třídy a těm požadovaným přidat skriptem CSS.

  • a
  • background-image
  • :link
  • :visited
  • :target
  • :first-child
  • table
  • thead
  • tr
  • ul
  • dl

Vyhledávání

Na tomtéž principu lze vytvořit i vyhledávání v obsahu na stránce.

Použijeme k tomu selektor obsahujícího řetězce. Ten aplikuje dané pravidlo na cokoliv, co má v hlídaném atributu požadovaný text.

p[class*="a"] {color: red}

Obarví všechny odstavce, které mají v názvu třídy písmeno a.

Odstavec p.ahoj

Odstavec p.nazdar

Odstavec p.cau

Toho využijeme a do nějakého atributu si připravíme klíčová slova. Vhodné je bude oddělit nějakým málo používaným znakem, aby vyhledávání nechytalo i složeniny více slov.

Klíčová slova může připravit server nebo případně JavaScript — tolerantnějšího vyhledávání dosáhneme převedením klíčových slov i hledaného řetězce na malá písmena (pro ještě tolerantnější vyhledávání můžeme odstranit diakritiku).

  • Posicování v CSS
  • Složení jednoduchého webu v PHP
  • Zjištění skutečných rozměrů obrázku
  • Box model
  • Stejně vysoké sloupce
  • Odkaz jako tlačítko
  • Upload souborů bez refreshe
  • Automatická datová optimalisace obrázků
  • PHP proxy skript
  • Fotografie na pozadí
  • Centrování v CSS
  • Zabránění rolování stránky
  • Automatický lazy-loading YouTube videí
  • Živý náhled CSS ze Sublime Text
  • Kulatý obrázek
  • Animace
  • Flat UI
  • Sublime Text 3 – pluginy a vylepšení
  • Emmet
  • Pro které prohlížeče optimalisovat
  • Mobilní web
  • Který prohlížeč je rychlejší?
  • Přidání URL do Seznamu a Google
  • Meta tag viewport
  • Menu reagujicí na kliknutí
  • Jak získat náhled webu?
  • Testování webů v různých prohlížečích

Separátní živá ukázka.

Vytvoření indexu v PHP

Převést v PHP nadpisy na klíčová slova jde třeba takto:

foreach ($nadpisy as $nadpis) {
  echo "<li data-slova='" . 
        str_replace(" ", "-", strtolower($nadpis)) . 
       "'>$nadpis";
}

Vytvoření indexu v JavaScriptu

Při načtení stránky může slova pro vyhledávání do data-atributu připravit i přímo JS.

var zaznam = document.getElementById("seznam-polozek").getElementsByTagName("li");
for (var i = 0; i < zaznam.length; i++) {
  zaznam[i].setAttribute("data-slova", zaznam[i].innerHTML.replace(/ /g, "-").toLowerCase());
} 

Alternativní řešení

Popsané řešení nelze použít a není vhodné vždy. V případě prohledávání velkého množství záznamů je nesmyslné všechen obsah vypisovat na jedné stránce. Lepší je AJAXové vyhledávání s pomocí serveru.

Vyfiltrovat výsledky umí i samotný JavaScript pomocí indexOf, bude to ale nejspíš pomalejší než CSS filtrování.

Uživatelský dojem by mohlo ještě zlepšit zvýraznění nalezeného řetězce.

Filtrování v JavaScriptu

Pro filtrování a řazení seznamů nebo tabulek existují i JS hotová řešení:

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Tisk stránky

Vytisknutí stránky

Jak správně připravit webovou stránku pro pohodlné vytištění.

Baterka v CSS a JavaScriptu

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

Načtení obrázku, až když je potřeba

Zpožděné načtení obrázku, až když je potřeba

Kromě potřeby nahrát obrázek dopředu (preload), aby byl v době použití 100% připravený, může být potřeba opačná – načíst jej, až v momentě, kdy je potřeba. Z důvodu nemrhání datovým přenosem.

Skloňování v CSS

„Programování“ v HTML a CSS

I bez úprav logiky serverového skriptu lze lecčeho dosáhnout samotným CSS.

Lightboxová vstupní stránka

Lightboxová vstupní stránka ihned po načtení

Jak vytvořit lightbox okno, které po načtení stránky překryje obsah.

Komentáře