Javascript to Search In Multiple Tables in same page with multiple search bars-CodePudding

I found this previous thread, which is EXACTLY what I need but for some reason I can't get it to work. Javascript to Search In Multiple Tables in same page

I copied the code exactly from this jsfiddle (http://jsfiddle.net/690713m4/1/) to an entirely new page just to eliminate any bonehead errors I was potentially making and it still will not work like it does in the jsfiddle

Here is the code :

    <html>
    <script sec="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script srt="https://code.jquery.com/jquery-3.3.1.js"></script>
    <body><div >
    <input  id="search" type="text">
</div>

<table id="table" >  
  <tr><td>PHP</td></tr>
  <tr><td>C#</td></tr>
  <tr><td>Javascript</td></tr>
  <tr><td>Jquery</td></tr>
  <tr><td>SQL</td></tr>
</table>
<br><br>

<div >
    <input  id="search2" type="text">
</div>
<table id="table2" >  
  <tr><td>Bootstrap</td></tr>
  <tr><td>Java</td></tr>
  <tr><td>C  </td></tr>
  <tr><td>Pyton</td></tr>
  
<script>var $rows = $('#table tbody tr');
$('#search').keyup(function() {
  var val = $.trim($(this).val()).replace(/  /g, ' ').toLowerCase();

  $rows.show().filter(function() {
    var text = $(this).text().replace(/\s /g, ' ').toLowerCase();
    return !~text.indexOf(val);
  }).hide();
});

var $rows2 = $('#table2 tbody tr');
$('#search2').keyup(function() {
  var val = $.trim($(this).val()).replace(/  /g, ' ').toLowerCase();

  $rows2.show().filter(function() {
    var text = $(this).text().replace(/\s /g, ' ').toLowerCase();
    return !~text.indexOf(val);
  }).hide();
});</script>
</table>
</body>
</html>

CodePudding user response：

Your code is not well formatted with wrong and missing tags. Here is the complete code with css and linked jquery 3.6

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .table {
            border: 1px solid red
        }
    </style>
</head>

<body>
    <div >
        <input  id="search" type="text">
    </div>

    <table id="table" >
        <tr>
            <td>PHP</td>
        </tr>
        <tr>
            <td>C#</td>
        </tr>
        <tr>
            <td>Javascript</td>
        </tr>
        <tr>
            <td>Jquery</td>
        </tr>
        <tr>
            <td>SQL</td>
        </tr>
    </table>
    <br><br>

    <div >
        <input  id="search2" type="text">
    </div>
    <table id="table2" >
        <tr>
            <td>Bootstrap</td>
        </tr>
        <tr>
            <td>Java</td>
        </tr>
        <tr>
            <td>C  </td>
        </tr>
        <tr>
            <td>Pyton</td>
        </tr>
    </table>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script>
        var $rows = $('#table tbody tr');
        $('#search').keyup(function () {
            var val = $.trim($(this).val()).replace(/  /g, ' ').toLowerCase();

            $rows.show().filter(function () {
                var text = $(this).text().replace(/\s /g, ' ').toLowerCase();
                return !~text.indexOf(val);
            }).hide();
        });

        var $rows2 = $('#table2 tbody tr');
        $('#search2').keyup(function () {
            var val = $.trim($(this).val()).replace(/  /g, ' ').toLowerCase();

            $rows2.show().filter(function () {
                var text = $(this).text().replace(/\s /g, ' ').toLowerCase();
                return !~text.indexOf(val);
            }).hide();
        });
    </script>
</body>

</html>

CodePudding user response：

@Nick already managed to repair your script so it will work again.

However, you should always try not to repeat yourself but instead try to write re-usable code. The following snippet shows one way of doing it.

It will work on any input elements contained in an ".input-group" classed <div>. The search string will then filter the rows in an immediately following table. There is no need for specifying id attributes anymore.

const lctrim=s=>s.replace(/\s /g," ").toLowerCase().trim();
$('.input-group').each(function(){
  const $rows=$(this).next().find("tr");
  $(this).find("input").on("input",function () {
    const val = lctrim($(this).val());
    $rows.show().filter(function () {
      return !~lctrim($(this).text()).indexOf(val);
    }).hide();
  });
});

<body>
<div >
    <input  type="text">
</div>
<table >
    <tr>
        <td>PHP</td>
    </tr>
    <tr>
        <td>C#</td>
    </tr>
    <tr>
        <td>Javascript</td>
    </tr>
    <tr>
        <td>Jquery</td>
    </tr>
    <tr>
        <td>SQL</td>
    </tr>
</table>
<br><br>

<div >
    <input  type="text">
</div>
<table >
    <tr>
        <td>Bootstrap</td>
    </tr>
    <tr>
        <td>Java</td>
    </tr>
    <tr>
        <td>C  </td>
    </tr>
    <tr>
        <td>Pyton</td>
    </tr>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

The same thing can also be done in pure "Vanilla" JS:

const lctrim=s=>s.replace(/\s /g," ").toLowerCase().trim();
document.querySelectorAll('.input-group').forEach(el=>{
  const rows=el.nextElementSibling.querySelectorAll("tr");
  el.querySelector("input").addEventListener("input",ev=>{
    const val = lctrim(ev.target.value);
    rows.forEach(r=>r.style.display=!~lctrim(r.textContent).indexOf(val)?"none":"");
  });
});

<body>
<div >
    <input  type="text">
</div>
<table >
    <tr>
        <td>PHP</td>
    </tr>
    <tr>
        <td>C#</td>
    </tr>
    <tr>
        <td>Javascript</td>
    </tr>
    <tr>
        <td>Jquery</td>
    </tr>
    <tr>
        <td>SQL</td>
    </tr>
</table>
<br><br>

<div >
    <input  type="text">
</div>
<table >
    <tr>
        <td>Bootstrap</td>
    </tr>
    <tr>
        <td>Java</td>
    </tr>
    <tr>
        <td>C  </td>
    </tr>
    <tr>
        <td>Pyton</td>
    </tr>
</table>