jQuery: simpleSearch

more at: http://stackoverflow.com/questions/12433304/live-search-through-table-rows#12433371

by Petr Haluza

HTML

<input type="text" id="search" placeholder="Search...">
<br>
<div style="margin:60px auto; padding:40px; background:rgba(0,0,0,0.5);max-width: 500px;color: white;">
<h1>Archiv downloadu HAL3000</h1>
<ol>
<li>1</li>
<li><a style="color:white;font-family:arial;margin: 5px 0;display: block;" href="./PCHS2287-Deskmini-83002018-PCHS2287-Deskmini-8300.zip">PCHS2287-Deskmini-83002018-PCHS2287-Deskmini-8300.zip</a></li><li><a style="color:white;font-family:arial;margin: 5px 0;display: block;" href="./PCHS2222-HAL3000-HoG-LE-INTEL-5802018-PCHS2222-HAL3000-HoG-LE-INTEL-580.zip">PCHS2222-HAL3000-HoG-LE-INTEL-5802018-PCHS2222-HAL3000-HoG-LE-INTEL-580.zip</a></li><li><a style="color:white;font-family:arial;margin: 5px 0;display: block;" href="./PCHS2252-HAL3000-MEGA-Gamer-8G10602018-PCHS2252-HAL3000-MEGA-Gamer-8G1060.zip">PCHS2252-HAL3000-MEGA-Gamer-8G10602018-PCHS2252-HAL3000-MEGA-Gamer-8G1060.zip</a></li><li><a style="color:white;font-family:arial;margin: 5px 0;display: block;" href="./PCHS2350-MegaGamer-MCR-SE-Pro.zip">PCHS2350-MegaGamer-MCR-SE-Pro.zip</a></li><li><a style="color:white;font-family:arial;margin: 5px 0;display: block;" href="./czc-HAL3000-MCR-2019S.zip">czc-HAL3000-MCR-2019S.zip</a></li><li><a style="color:white;font-family:arial;margin: 5px 0;display: block;" href="./HAL3000-PCHS2356-MEGA-Gamer-Elite-czc.zip">HAL3000-PCHS2356-MEGA-Gamer-Elite-czc.zip</a></li><li><a style="color:white;font-family:arial;margin: 5px 0;display: block;" href="./PCHS2258-Master-Gamer-16G1060-6G-czc-2019.zip">PCHS2258-Master-Gamer-16G1060-6G-czc-2019.zip</a></li><li><a style="color:white;font-family:arial;margin: 5px 0;display: block;" href="./HAL3000-MCR-2018-Ultimate.zip">HAL3000-MCR-2018-Ultimate.zip</a></li><li><a style="color:white;font-family:arial;margin: 5px 0;display: block;" href="./HAL3000-MCR-2018-Pro-8G.zip">HAL3000-MCR-2018-Pro-8G.zip</a></li><li><a style="color:white;font-family:arial;margin: 5px 0;display: block;"...

CSS

input{display:block}
table, tr, td, th{
    padding: 2px;
    border: 1px solid #ccc;
}

JavaScript

$("#search").keyup(function() {
    var value = this.value;

    $("ol").find("li").each(function(index) {
        if (index === 0) return;
        var id = $(this).find("a").first().text();
        $(this).toggle(id.indexOf(value) !== -1);
    });
});