Stránka 1 z 1
Hledání "CTRL+F" políčkem na webu
Napsal: 11 led 2015 11:13
od 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!
Re: Hledání "CTRL+F" políčkem na webu
Napsal: 12 led 2015 09:46
od 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');
}
});
});
Re: Hledání "CTRL+F" políčkem na webu
Napsal: 12 led 2015 18:03
od kuxik009
Super, to by bylo skvělé!
Jen prosím o dvě věci:
- Když si zatrhnu checkboxy, potom něco vyhledám a následně smažu hledání, zůstanou checkboxy zatrhlé?
- 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!
Re: Hledání "CTRL+F" políčkem na webu
Napsal: 13 led 2015 11:59
od 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.
Re: Hledání "CTRL+F" políčkem na webu
Napsal: 13 led 2015 17:07
od 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!
Re: Hledání "CTRL+F" políčkem na webu
Napsal: 14 led 2015 09:09
od 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])
Re: Hledání "CTRL+F" políčkem na webu
Napsal: 14 led 2015 15:07
od 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