Živá ukázka

Výsledek

<div class="hledani">
  <p>
    <label>Hledaný výraz: <input type="text" onkeyup="vyhledat(this.value)"></label>
  </p>
  <ul id="hledane">
    <li>Posicování v CSS	
    <li>Složení jednoduchého webu v PHP	
    <li>Zjištění skutečných rozměrů obrázku	
    <li>Box model	
    <li>Stejně vysoké sloupce	
    <li>Odkaz jako tlačítko	
    <li>Upload souborů bez refreshe	
    <li>Automatická datová optimalisace obrázků	
    <li>PHP proxy skript	
    <li>Fotografie na pozadí	
    <li>Centrování v CSS	
    <li>Zabránění rolování stránky	
    <li>Automatický lazy-loading YouTube videí	
    <li>Živý náhled CSS ze Sublime Text	
    <li>Kulatý obrázek	
    <li>Animace	
    <li>Flat UI	
    <li>Sublime Text 3 – pluginy a vylepšení	
    <li>Emmet	
    <li>Pro které prohlížeče optimalisovat	
    <li>Mobilní web	
    <li>Který prohlížeč je rychlejší?	
    <li>Přidání URL do Seznamu a Google	
    <li>Meta tag viewport	
    <li>Menu reagujicí na kliknutí	
    <li>Jak získat náhled webu?	
    <li>Testování webů v různých prohlížečích
  </ul>
<script>
var zaznam = document.getElementById("hledane").getElementsByTagName("li");

for (var i = 0; i < zaznam.length; i++) {
  zaznam[i].setAttribute("data-slova", sjednotit(zaznam[i].innerHTML));
}  
</script>
</div>

HTML

Autoformát
Standardní režim
Mobilní zobrazení

CSS

Autoformát
CSS reset
Až na konci

/* převede text na malá písmena a nahradí mezery */
function sjednotit(text) {
  return text.replace(/ /g, "-").toLowerCase();
}
  
/* připojení CSS JavaScriptem s podporou IE 7 */
function nastavitCss(css) {
  var stylSkript = document.getElementById("styl-skriptu");
  if (stylSkript) {
    stylSkript.parentNode.removeChild(stylSkript);
  }
  
  var pomocnyDiv = document.createElement('div');
  pomocnyDiv.innerHTML = '<p>jen tak</p><style id="styl-skriptu">' + css + '</style>';
  document.getElementsByTagName('head')[0].appendChild(pomocnyDiv.childNodes[1]);
}

function vyhledatBezAnimace(slovo) {
  nastavitCss(".polozky li {display: none} li[data-slova*=\"" + 
            slovo.toLowerCase() + "\"] {display: list-item}");
}

/* vytvoří potřebné selektory */
function vyhledat(slovo) {
  var hidden = "max-height: 0; opacity: 0; =display: none";
  var visible = "max-height: 1.5em; opacity: 1; =display: block";
  
  /* Firefox a Chrome by při smazání hledaného slova nic neukázal */
  if (slovo == "") {
    hidden = visible;
  }
  
  nastavitCss(".hledani ul li {" + hidden + "} .hledani ul li[data-slova*=\"" + 
            sjednotit(slovo) + "\"] {" + visible + "}");
}

JS

Autoformát
jQuery
Umístění JS