Etsi-toiminnossa käytetään lomakekentää johon kirjoitetaan etsittävä asia.
Esimerkki, etsitään LISTA:lta:
jQuery-koodaus:
$(document).ready(function(){
$("#etsi").on("keyup", function() {
var arvo = $(this).val().toLowerCase();
$("#lista li").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(arvo) > -1)
});
});
});
HTML-koodaus:
<input id="etsi" type="text" placeholder="Etsi..">
<br>
<ul class="puna" id="lista">
<li> Ensimmäinen </li>
<li> Toinen </li>
<li> Kolmas </li>
<li> Neljäs </li>
</ul>
Tulos www-sivulla:
Esimerkki, etsitään www-sivulta, etsitään jonkin HTML-elementin sisältä (body tai div):
jQuery-koodaus:
$(document).ready(function(){
$("#etsi").on("keyup", function() {
var arvo = $(this).val().toLowerCase();
$("#omaDIV *").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(arvo) > -1)
});
});
});
HTML-koodaus:
<h3>Etsitään "mitä tahansa"</h3>
<p>Etsitään tekstiä id="omaDIV" elementin sisällöstä:</p>
<input class="marginaali" id="etsi" type="text" placeholder="Etsi..">
<div class="puna" id="omaDIV">
<p> Tekstiä p-elmentissä. </p>
<div> Tässä teksti div-elementissä. </div>
<button class="button"> Lähetä </button>
<button class="button"> Päivitä </button>
<p> Tässäkin p-elementti. </p>
</div>
Tulos www-sivulla:
Esimerkki, etsitään taulukosta:
jQuery-koodaus:
$(document).ready(function(){
$("#omaHaku").on("keyup", function() {
var arvo = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(arvo) > -1)
});
});
});
HTML-koodaus:
<h3>Etsi taulukosta</h3>
<p>Kirjoita Etsi-kentään mitä haluat etsiä taulukosta:</p>
<input id="omaHaku" type="text" placeholder="Etsi..">
<br><br>
<table>
<thead>
<tr><th>Sukunimi</th> <th>Etunimi</th> <th>Email</th> <th>Sijoitus</th></tr>
</thead>
<tbody id="myTable">
<tr><td>Matilainen </td> <td>Kalle</td> <td>matikka.kalle@made.com </td> <td>3 </td></tr>
<tr><td>Hömötiainen </td> <td>Auli </td> <td>aulis.tintti@kolo.swe </td> <td>2 </td></tr>
<tr><td>Anjanlankoski</td> <td>Elina</td> <td>ellun.koski@pikkususi.fi</td> <td>1 </td></tr>
<tr><td>Viialainen </td> <td>Wilma</td> <td>wiila.wilma@artpen.com </td> <td>4 </td></tr>
</tbody>
</table>
Tulos www-sivulla: