Hledání "CTRL+F" políčkem na webu Vyřešeno

[kuxik009]

Zdravím,
mám na webu následující kód:

Kód: Vybrat vše

$pole = array(položky);
<table width="100%"><?
foreach ($pole as $klic => $hodnota)
 {
  $klic_del = $klic/2;
  $klic_zao = floor($klic_del);
  if ($klic_del == $klic_zao)
   {?>
    <tr><td width="50%"><input type="checkbox" id="<?php echo $klic ?>"><label for='<? echo $klic ?>'><? echo $hodnota ?></label></td><?
   }
    else
     {?>
      <td width="50%"><input type="checkbox" id="<?php echo $klic ?>"><label for='<? echo $klic ?>'><? echo $hodnota ?></label></td></tr><?
     }
 }


A potřeboval bych vyhledávací políčko, do kterého když někdo napíše nějakou věc, která je v poli, tak se zvýrazní její vypsání v té tabulce.
Zkoušel jsem toto:

Kód: Vybrat vše

<form><input type='text' name='h'> <input type='submit' value='Vyhledat'></form>
...
if (isset($_GET["h"]))
 {
  $hledej = $_GET["h"];
 }
  else
    $hledej = "";
...
if ($hodnota == $hledej)
    $hodnota = "<span style='background-color:orange;' id='#zv'>$hodnota</span>";


A funguje to, ale já bych to potřeboval vyhledat bez znovunačtení stránky (pravděpodobně JS). Víte prosím někdo, jak na to? Děkuji předem!

[Reklama]

[lamin_cz]

Něco podobného mám v jednom skriptu ... řeším to přes jQuery:
v HTML je tento input, přes který se hledá:

Kód: Vybrat vše

<input class="searchInHere" name="searchInHere" value="" placeholder="Vyhledat v této skupině" type="search" size="80" style="height: 20px" />

Samotný jQuery kód:
(kód provádí to, že nechá zobrazené jen ty prvky, které mají class jsFmFile a v atributu data-name je obsaženo ono vyhledávané jméno (jen to musí být přesná hodnota - bez rozdílu velikosti písmen)

Kód: Vybrat vše

$(document).ready(function(){

  $(document).on('input keypress paste change', '.searchInHere', function() {
    var term = $('input[name=searchInHere].searchInHere').val().toLowerCase();

    if(term)
      {
        // Ukážeme pouze ty produkty, které odpovídají hledání
        $('.jsFmFile').show();
       
        $('.jsFmFile').addClass('jsFmData');
        $('.neprovFil').addClass('neprov');
        $('.neprovFil').removeClass('neprovFil');
       
        var mans = $('.jsFmFile').filter(function() {
          return $(this).attr('data-name').toLowerCase().indexOf(term) > -1;
        });
       
        $('.jsFmFile').not(mans).hide();
        $('.jsFmFile').not(mans).removeClass('jsFmData');
        $('.neprov').not(mans).addClass('neprovFil');
        $('.neprovFil').not(mans).removeClass('neprov');
       
      }
    else
      {
        // Pokud vymaže pole s hledáním, tak ukážeme všechny
        $('.jsFmFile').fadeIn();
        $('.jsFmFile').addClass('jsFmData');
        $('.neprovFil').addClass('neprov');
        $('.neprovFil').removeClass('neprovFil');
      }
  });
});

[kuxik009]

Super, to by bylo skvělé!
Jen prosím o dvě věci:

1. Když si zatrhnu checkboxy, potom něco vyhledám a následně smažu hledání, zůstanou checkboxy zatrhlé?
2. Mohl by jsi prosím kód upravit přesně na ten můj? V jQuery se vůbec nevyznám, ani ho nemám nainstalované (s tím souvisí - kterou verzi si mám stáhnout?)

Děkuju moc předem, moc si toho vážím!

[lamin_cz]

ad 1. ta fce jen dané prvky schovává (přidá jím styl display:none;)

ad 2. snad v průběhu dneška na to budu mít čas.

[kuxik009]

Super, díky moc! Jsem rád, že se jen schovají, protože, jelikož se jedná o formulář, je to celkem stěžejní. Kdyby zatrhnuté nezůstali, asi bych musel při kliknutí na checkbox např. uložit session nebo dočasnou tabulku do db, což je celkem prasárna, mít třeba 20 session
A díky moc i za to upravení, moc si toho vážím! Jen vysvětlení - ta podmínka ve foreach je proto, aby zjistila, je-li položka sudá nebo lichá, a podle toho ji přiřadila do levého nebo pravého sloupečku tabulky (výsledek, zatím nedokončený). Ještě jednou díky!

[lamin_cz]

úprava pro Tvé potřeby:
1. code (kdyby jsi nějak udělal, aby $hodnota nebylo v <span> </span> ... bylo by to ideální)

Kód: Vybrat vše

$pole = array(položky);
<table width="100%"><?
foreach ($pole as $klic => $hodnota)
 {
  $klic_del = $klic/2;
  $klic_zao = floor($klic_del);
  if ($klic_del == $klic_zao)
   {?>
    <tr><td width="50%" class="schovej" data-name="<? echo $hodnota ?>"><input type="checkbox" id="<?php echo $klic ?>"><label for='<? echo $klic ?>'><? echo $hodnota ?></label></td><?
   }
    else
     {?>
      <td width="50%" class="schovej" data-name="<? echo $hodnota ?>"><input type="checkbox" id="<?php echo $klic ?>"><label for='<? echo $klic ?>'><? echo $hodnota ?></label></td></tr><?
     }
 }

jQuery kod (vloz do stranky jako <script> ... </script> nebo to externiho .js souboru)

Kód: Vybrat vše

$(document).ready(function(){

  $(document).on('input keypress paste change', '.searchInHere', function() {
    var term = $('input[name=searchInHere].searchInHere').val().toLowerCase();

    if(term)
      {
        // Ukážeme pouze ty, které odpovídají hledání
        $('.schovej').show();
       
        var mans = $('.schovej').filter(function() {
          return $(this).attr('data-name').toLowerCase().indexOf(term) > -1;
        });
        // ty co neodpovidaji hledani se schovaji
        $('.schovej').not(mans).hide();
       
      }
    else
      {
        // Pokud vymaže pole s hledáním, tak ukážeme všechny
        $('.schovej').fadeIn();
      }
  });
});

Používám verzi jQuery 2.1.1

Input pouzij ten, ktery mam ja (v mem 1. prispevku). Muzes si ho upravit podle libosti, ale musi mit class a name searchInHere, v pripade zmeny to musis upravit i v jQuery kodu (class je .searchInHere a name je input[name=searchInHere])

[kuxik009]

Díky moc, funguje to přesně tak, jak má!!! Ten span tam byl stejně jen protože jsem testoval vlastní hledání s JS, které ale nefungovalo . Ještě jednou díky!
Mimochodem: Díky taky za ukázání attributu placeholder, doteď jsem to řešil JS a CSS