jQuery -Esimerkkejä

KESKEN 24.11.2022

ETSI esimerkkejä

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:


Design and edit player