how to make search functionality based on dropdown list

I m facing problem in below code, when I’m selecting a position in dropdown menu filter option is one is not working.

function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("zui-table");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}

Code snippet

function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("zui-table");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

function myFunction1() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput1");
  filter = input.value.toUpperCase();
  table = document.getElementById("zui-table");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

function myFunction2() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput2");
  filter = input.value.toUpperCase();
  table = document.getElementById("zui-table");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[2];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
.zui-table {
  border: solid 1px #DDEEEE;
  border-collapse: collapse;
  border-spacing: 0;
  font: normal 13px Arial, sans-serif;
}

.zui-table thead th {
  background-color: #DDEFEF;
  border: solid 1px #DDEEEE;
  color: #336B6B;
  padding: 10px;
  text-align: left;
  text-shadow: 1px 1px 1px #fff;
}

#zui-table tbody td {
  border: solid 1px #DDEEEE;
  color: #333;
  padding: 10px;
  text-shadow: 1px 1px 1px #fff;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 18%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myInput1 {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 18%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myInput2 {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 18%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<select id="myInput1" onkeyup="myFunction1()" placeholder="Search for psition..">
  <option value="volvo">Select postion</option>
  <option value="volvo">C</option>
  <option value="saab">PG</option>
  <option value="fiat">SG</option>
  <option value="audi">PF</option>
</select>
<input type="text" id="myInput2" onkeyup="myFunction2()" placeholder="Search for Height.." title="Type in a name">



<table id="zui-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Height</th>
      <th>Born</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>TeMarcus Cousins</td>
      <td>C</td>
      <td>6'11"</td>
      <td>08-13-1990</td>
      <td>$4,917,000</td>
    </tr>
    <tr>
      <td>Isaiah Thomas</td>
      <td>PG</td>
      <td>5'9"</td>
      <td>02-07-1989</td>
      <td>$473,604</td>
    </tr>
    <tr>
      <td>Ben McLemore</td>
      <td>SG</td>
      <td>6'5"</td>
      <td>02-11-1993</td>
      <td>$2,895,960</td>
    </tr>
    <tr>
      <td>Marcus Thornton</td>
      <td>SG</td>
      <td>6'4"</td>
      <td>05-05-1987</td>
      <td>$7,000,000</td>
    </tr>
    <tr>
      <td>Jason Thompson</td>
      <td>PF</td>
      <td>6'11"</td>
      <td>06-21-1986</td>
      <td>$3,001,000</td>
    </tr>
  </tbody>
</table>

27 thoughts on “how to make search functionality based on dropdown list”

  1. There are 2 thing you’ll need to change in your code on select menu,

    1. Change the values of option.
    2. Change the event of select from onkeyup to onchange, onkeyup won’t work when you’ll select an option with cursor.
    function myFunction() {
      var input, filter, table, tr, td, i, txtValue;
      input = document.getElementById("myInput");
      filter = input.value.toUpperCase();
      table = document.getElementById("zui-table");
      tr = table.getElementsByTagName("tr");
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
          txtValue = td.textContent || td.innerText;
          if (txtValue.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
          }
        }
      }
    }
    
    function myFunction1() {
      var input, filter, table, tr, td, i, txtValue;
      input = document.getElementById("myInput1");
      filter = input.value.toUpperCase();
      table = document.getElementById("zui-table");
      tr = table.getElementsByTagName("tr");
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[1];
        if (td) {
          txtValue = td.textContent || td.innerText;
          if (txtValue.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
          }
        }
      }
    }
    
    function myFunction2() {
      var input, filter, table, tr, td, i, txtValue;
      input = document.getElementById("myInput2");
      filter = input.value.toUpperCase();
      table = document.getElementById("zui-table");
      tr = table.getElementsByTagName("tr");
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[2];
        if (td) {
          txtValue = td.textContent || td.innerText;
          if (txtValue.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
          }
        }
      }
    }
    .zui-table {
      border: solid 1px #DDEEEE;
      border-collapse: collapse;
      border-spacing: 0;
      font: normal 13px Arial, sans-serif;
    }
    
    .zui-table thead th {
      background-color: #DDEFEF;
      border: solid 1px #DDEEEE;
      color: #336B6B;
      padding: 10px;
      text-align: left;
      text-shadow: 1px 1px 1px #fff;
    }
    
    #zui-table tbody td {
      border: solid 1px #DDEEEE;
      color: #333;
      padding: 10px;
      text-shadow: 1px 1px 1px #fff;
    }
    
    #myInput {
      background-image: url('/css/searchicon.png');
      background-position: 10px 10px;
      background-repeat: no-repeat;
      width: 18%;
      font-size: 16px;
      padding: 12px 20px 12px 40px;
      border: 1px solid #ddd;
      margin-bottom: 12px;
    }
    
    #myInput1 {
      background-image: url('/css/searchicon.png');
      background-position: 10px 10px;
      background-repeat: no-repeat;
      width: 18%;
      font-size: 16px;
      padding: 12px 20px 12px 40px;
      border: 1px solid #ddd;
      margin-bottom: 12px;
    }
    
    #myInput2 {
      background-image: url('/css/searchicon.png');
      background-position: 10px 10px;
      background-repeat: no-repeat;
      width: 18%;
      font-size: 16px;
      padding: 12px 20px 12px 40px;
      border: 1px solid #ddd;
      margin-bottom: 12px;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
    <select id="myInput1" onchange="myFunction1()" placeholder="Search for psition..">
      <option value="0">Select postion</option>
      <option value="C">C</option>
      <option value="PG">PG</option>
      <option value="SG">SG</option>
      <option value="PF">PF</option>
    </select>
    <input type="text" id="myInput2" onkeyup="myFunction2()" placeholder="Search for Height.." title="Type in a name">
    
    
    
    <table id="zui-table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Height</th>
          <th>Born</th>
          <th>Salary</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>TeMarcus Cousins</td>
          <td>C</td>
          <td>6'11"</td>
          <td>08-13-1990</td>
          <td>$4,917,000</td>
        </tr>
        <tr>
          <td>Isaiah Thomas</td>
          <td>PG</td>
          <td>5'9"</td>
          <td>02-07-1989</td>
          <td>$473,604</td>
        </tr>
        <tr>
          <td>Ben McLemore</td>
          <td>SG</td>
          <td>6'5"</td>
          <td>02-11-1993</td>
          <td>$2,895,960</td>
        </tr>
        <tr>
          <td>Marcus Thornton</td>
          <td>SG</td>
          <td>6'4"</td>
          <td>05-05-1987</td>
          <td>$7,000,000</td>
        </tr>
        <tr>
          <td>Jason Thompson</td>
          <td>PF</td>
          <td>6'11"</td>
          <td>06-21-1986</td>
          <td>$3,001,000</td>
        </tr>
      </tbody>
    </table>
    <select id="myInput1" onchange="myFunction1()" placeholder="Search for psition..">
      <option value="0">Select postion</option>
      <option value="C">C</option>
      <option value="PG">PG</option>
      <option value="SG">SG</option>
      <option value="PF">PF</option>
    </select>
    
    Reply
  2. You just have use, instead of using onkeyup use onchange , and also change values of option then it’s work fine, like this :

    <select  id="myInput1" onchange="myFunction1()" placeholder="Search for psition.." >
      <option value="volvo">Select postion</option>
        <option value="C">C</option>
        <option value="PG">PG</option>
        <option value="SG">SG</option>
        <option value="PF">PF</option>
      </select>
    

    modified code

    Reply

Leave a Comment