Autor | Zpráva | ||
---|---|---|---|
sitole Profil |
#1 · Zasláno: 9. 6. 2015, 11:20:18
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> |
||
Časová prodleva: 9 dní
|
|||
petr 6 Profil |
#2 · Zasláno: 18. 6. 2015, 10:11:01
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 |
#3 · Zasláno: 18. 6. 2015, 15:12:29
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 |
#4 · Zasláno: 18. 6. 2015, 15:37:26
V tom případě by snad mělo stačit jen řádek 41 zaměnit za
visible = hidden;
|
||
sitole Profil |
#5 · Zasláno: 18. 6. 2015, 16:12:09
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 |
#6 · Zasláno: 18. 6. 2015, 16:21:03
Nerozumím řeči tvého kmene. Prosím o odkaz na živou ukázku.
|
||
sitole Profil |
#7 · Zasláno: 18. 6. 2015, 16:35:25
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í.
|
||
Časová prodleva: 9 let
|
0