Autor Zpráva
sitole
Profil
Ahoj, dělám jakési "vyhledavání" tedy spíše filtrování obsahu li.
Celičký kod jsem našel na JeČas.cz a jaksi ho potřebuji zrcadlově obrátit.
Tady je zobrazený seznam a pomocí formuláře se sety filtruje, ale já jej potřebuji upravit tak, aby tam nebylo nia a poté si přidával obsah, který určité slovo/písmeno obsahuje. Zatím jsem pouze obrátil značky hidden za visible, ale nefunguje to. Co tedy doporučujete?
Tady je neupravený kod. Mám to napsat celé znovu či stačí toto upravit? :-)

<!doctype html>
<style>
.hledani ul {list-style: none}
.hledani li {
  =display: block; overflow: hidden; 
  max-height: 1.5em; opacity: 1; transition: 1s all
}

</style>

<script>
/* 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 + "}");
}
</script>
<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>Animace    
    <li>Flat UI    
  </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>
petr 6
Profil
sitole:
já jej potřebuji upravit tak, aby tam nebylo nia a poté si přidával obsah, který určité slovo/písmeno obsahuje
Nevím, čeho chceš docílit, ale tohle je logický nesmysl.

Napíšeš a → budou zobrazeny položky "Odkaz jako...", "Upload...", "Automatická...", "Animace" a "Flat UI"
Připíšeš t → budou zobrazeny položky "Automatická..." a "Flat UI"
Připíšeš i → bude zobrazena položka "Automatická..."

Čím víc písmen napíšeš, tím konkrétnější bude filtr, a tím méně položek bude zobrazeno. Naopak to prostě nejde.
sitole
Profil
petr 6:
Asi jsi nepochopil moji prosbu. Já nepotřebuji upravovat vyhledavání, ale pouze jej nastavit tak, aby když jsem nevstoupil do vyhledavacího pole není zde žádný výsledek. A až poté co tam poprvé napíši "a" se začnou výsledky zobrazovat. :)
petr 6
Profil
V tom případě by snad mělo stačit jen řádek 41 zaměnit za visible = hidden;
sitole
Profil
Mohůžel, ale toto řešení jsem testoval a funguje pouze, když načtu stránku je výsledek naprosto stejný. Seznam je vypsaný a mohu vyhledávat, ale když napíšu "a" vyhledají se tedy slova s "a", ale když tedy to a smažu nic se nazobrazí. Přesně toto chci, ale stále potřebuji přidat to, že se při prázdném poli nic neezobrazí.
petr 6
Profil
Nerozumím řeči tvého kmene. Prosím o odkaz na živou ukázku.
sitole
Profil
petr 6:
Tady tedy posílám odkaz na živou ukázku :) http://kod.djpw.cz/nunb
petr 6
Profil
Takže [#4] a navíc všem položkám <li> nastavit styl tak, aby byly při načtení/obnovení stránky skryty. A vyčistit klávesy vpravo vedle písmena M, nějak ti vynechávají.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0