Autor Zpráva
sitole
Profil
#1 · Zasláno: 9. 6. 2015, 11:20:18
Odpovědět Citovat
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? :-) 

1<!doctype html>
2<style>
3.hledani ul {list-style: none}
4.hledani li {
5  =display: block; overflow: hidden; 
6  max-height: 1.5em; opacity: 1; transition: 1s all
7}
8 
9</style>
10 
11<script>
12/* převede text na malá písmena a nahradí mezery */
13function sjednotit(text) {
14  return text.replace(/ /g, "-").toLowerCase();
15}
16  
17/* připojení CSS JavaScriptem s podporou IE 7 */
18function nastavitCss(css) {
19  var stylSkript = document.getElementById("styl-skriptu");
20  if (stylSkript) {
21    stylSkript.parentNode.removeChild(stylSkript);
22  }
23  
24  var pomocnyDiv = document.createElement('div');
25  pomocnyDiv.innerHTML = '<p>jen tak</p><style id="styl-skriptu">' + css + '</style>';
26  document.getElementsByTagName('head')[0].appendChild(pomocnyDiv.childNodes[1]);
27}
28 
29function vyhledatBezAnimace(slovo) {
30  nastavitCss(".polozky li {display: none} li[data-slova*=\"" + 
31            slovo.toLowerCase() + "\"] {display: list-item}");
32}
33 
34/* vytvoří potřebné selektory */
35function vyhledat(slovo) {
36  var hidden = "max-height: 0; opacity: 0; =display: none";
37  var visible = "max-height: 1.5em; opacity: 1; =display: block";
38  
39  /* Firefox a Chrome by při smazání hledaného slova nic neukázal */
40  if (slovo == "") {
41    hidden = visible;
42  }
43  
44  nastavitCss(".hledani ul li {" + hidden + "} .hledani ul li[data-slova*=\"" + 
45            sjednotit(slovo) + "\"] {" + visible + "}");
46}
47</script>
48<div class="hledani">
49  <p>
50    <label>Hledaný výraz: <input type="text" onkeyup="vyhledat(this.value)"></label>
51  </p>
52  <ul id="hledane">
53    <li>Posicování v CSS    
54    <li>Složení jednoduchého webu v PHP    
55    <li>Zjištění skutečných rozměrů obrázku    
56    <li>Box model    
57    <li>Stejně vysoké sloupce    
58    <li>Odkaz jako tlačítko    
59    <li>Upload souborů bez refreshe    
60    <li>Automatická datová optimalisace obrázků    
61    <li>Animace    
62    <li>Flat UI    
63  </ul>
64<script>
65var zaznam = document.getElementById("hledane").getElementsByTagName("li");
66 
67for (var i = 0; i < zaznam.length; i++) {
68  zaznam[i].setAttribute("data-slova", sjednotit(zaznam[i].innerHTML));
69}  
70</script>
71</div>
<!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
Odpovědět Citovat
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
Odpovědět Citovat
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
Odpovědět Citovat
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
Odpovědět Citovat
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
Odpovědět Citovat
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
Odpovědět Citovat
petr 6:
Tady tedy posílám odkaz na živou ukázku :) http://kod.djpw.cz/nunb
petr 6
Profil
#8 · Zasláno: 18. 6. 2015, 16:54:23 · Upravil/a: petr 6 o 2 minuty později
Odpovědět Citovat
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: 10 let
Toto vlákno je staré, již dlouho do něj nikdo nepřispíval.

Informace a odkazy zde uváděné už nemusejí být aktuální. Nechcete-li řešit zde uvedenou konkrétní otázku, založte si vlastní vlákno, nepište do tohoto. Vložíte-li sem nyní příspěvek, upoutáte pozornost mnoha lidí a někteří z nich si jen kvůli vám přečtou i všechny předcházející příspěvky. Předpokládáte-li, že váš text skutečně bude hodnotný, stiskněte následující tlačítko:


Běda vám, jestli to bude blábol.

0