Hello There is a working script written in jQuery that highlights the value "No Results" when input non-existing value in the table into the input ("Live Search"). I tried to rewrite it myself, read the documentation, but without success. Running jQuery code:

 $(".search").keyup(function () { var search = $(this).val(); $(".list").children().show(); $('#noresults').remove(); if (search) { $(".list").children().not(":containsNoCase(" + search + ")").hide(); $(".list").each(function () { if ($(this).children(':visible').length == 0) $(this).append('<tr class="noresults"><td style="text-align:center; font-size:17px; padding:25px 0 25px 0!important">No Results</td></tr>'); }); } }); $.expr[":"].containsNoCase = function (el, i, m) { var search = m[3]; if (!search) return false; return new RegExp(search, "i").test($(el).text()); };

The script itself, in fact, is taken from here :

Non-working code in pure JS, rewritten by me:

 document.getElementByClassName('search').onkeyup = function() { var search = this.value; document.getElementByClassName('list').children().show(); document.getElementById('noresults').remove(); if(search) { document.getElementByClassName('list').children().not(":containsNoCase(" + search + ")").hide(); document.getElementByClassName('list').each = function () { if(this.children(':visible').length == 0) this.append('<tr class="noresults"><td style="text-align:center; font-size:17px; padding:25px 0 25px 0!important">No Results</td></tr>'); } } }; expr[":"].containsNoCase = function (el, i, m) { var search = m[3]; if (!search) return false; return new RegExp(search, "i").test($(el).text()); };

Especially I can not find an alternative to JS for the second function:

 expr[":"].containsNoCase = function (el, i, m) { var search = m[3]; if (!search) return false; return new RegExp(search, "i").test($(el).text()); };

Help rewrite it to pure js. Thank you in advance!

  • Add an example of your code, what exactly did you fail? - user218976 pm
  • An example of a working script on jQuery: http://jsfiddle.net/bk13detv/26/ - Vania Sulyma
  • Add an explanation of which elements this selector selects: containsNoCase - Grundy

2 answers 2

In general, having rummaged on various forums and having sat a couple of days over the documentation it was possible to rewrite this code. I throw the working version on pure JavaScript, maybe someone will need it.

  document.getElementById("search-input").addEventListener("keyup", function (evt) { let mylist = document.querySelectorAll(".list"); for (let tbody of mylist) { let noresults = true; let noresultsrow = tbody.querySelectorAll(".noresults"); if (noresultsrow.length > 0) for (let row of noresultsrow) row.parentElement.removeChild(row); for (let row of tbody.querySelectorAll("tr")) { let includes = row.textContent.toLowerCase().search(evt.target.value.toLowerCase()) > -1; if (includes) noresults = false; row.style.display = includes ? "" : "none"; } if (noresults) { tbody.innerHTML += "<tr class='noresults'><td style='text-align:center; font-size:17px; padding:25px 0 25px 0!important'>Brak wyników</td></tr>"; } } });

    An example of a working script on jQuery: http://jsfiddle.net/bk13detv/26/

    Line by line analysis ...

     // $("#my-search-input").keyup(function () { document.getElementById('my-search-input').onkeyup = function(e) { // var search = $(this).val(); var search = e.target.value; // $(".my-list") document.querySelectorAll('.my-list').forEach(function(elem) { // .children() for (let child of elem.children) { // .show() child.style.display = ''; } }); // $('.noresults') document.querySelectorAll('.noresults').forEach(function(elem) { // .remove() elem.remove(); }); // if (search) { if (search) { // $(".my-list") document.querySelectorAll('.my-list').forEach(function(elem) { // .children() for (let child of elem.children) { // .not(":containsNoCase(" + search + ")") if (!containsNoCase(child, search)) { // .hide() child.style.display = 'none'; } } }); } // $(".my-list").each(function() { document.querySelectorAll('.my-list').forEach(function(elem) { // if ($(this).children(':visible').length == 0) if (!elem.offsetHeight) { // $(this).append('<tr class="noresults"><td colspan="3"><em>No Results</em></td></tr>'); elem.insertAdjacentHTML('beforeend', '<tr class="noresults"><td colspan="3"><em>No Results</em></td></tr>'); } }); } // $.expr[":"].containsNoCase = function(el, i, m) { var containsNoCase = function(el, search) { // if (!search) return false; if (!search) return false; // return new RegExp(search, "i").test($(el).text()); return new RegExp(search, 'i').test(el.textContent); }; 
     input { padding: 10px 8px; width: 300px; } table { background-color: lightgrey; margin: 24px 0; text-align: left; width: 100%; } th { background-color: darkgrey; } th, td { padding: 4px 8px; } 
     <section> <input id="my-search-input" type="text" placeholder="Search list" /> <div class="something"> <table> <thead> <tr> <th>Name</th> <th>2nd column</th> <th>3rd column</th> </tr> </thead> <tbody class="my-list"> <tr> <td>Lorem ipsum</td> <td>123</td> <td>Right</td> </tr> <tr> <td>Dolor sit</td> <td>100</td> <td>Wrong</td> </tr> </tbody> </table> </div> <div class="something"> <table> <thead> <tr> <th>Name</th> <th>2nd column</th> <th>3rd column</th> </tr> </thead> <tbody class="my-list"> <tr> <td>Element</td> <td>321</td> <td>Something</td> </tr> <tr> <td>More elements</td> <td>444</td> <td>Cowabunga</td> </tr> <tr> <td>boom</td> <td>yo</td> <td>enough</td> </tr> </tbody> </table> </div> </section>