Signup
 
  1. Home
  2. How-to-search-live-data-from-div-using-javascript

How to search live data from div using javascript

how to search live data from div using javascript
Deepak Sharma
Asked 02-12-2024
193

Answer (1)
hi using jquery fast $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myTable tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); });
Ankur Rajput
Asked 24-02-2020
45 Likes
Comments
Write comment

Answer (2)
<div class="search-bar" style=" "> <input onkeyup="search(this.value)" id="searchType" class="field" type="search" name="search" autocomplete="off" value="" placeholder="Search here...">  </div> <ul> <li data-position="Tomato" class="class item col-lg-4 col-md-3 col-sm-4 col-xs-6 item-class"> <div class="actions">Tomato</div> </li> <li data-position="Patato"  class="class item col-lg-4 col-md-3 col-sm-4 col-xs-6 item-class"> <div class="actions">Patato</div> </li> <li data-position="onion"  class="class item col-lg-4 col-md-3 col-sm-4 col-xs-6 item-class"> <div class="actions">onion</div> </li> </ul> <script> function search(str) { var value = document.getElementById('searchType').value.toLowerCase(); var classDiv = document.getElementsByClassName('item-class'); if (value) { var i = 0; var curr = ""; for (i = 0; classDiv.length > i; i++) { if (curr = document.getElementsByClassName("item-class")[i].getAttribute("data-position").indexOf(value) != -1) { document.getElementsByClassName("item-class")[i].style.display = "inline-block";  } else { document.getElementsByClassName("item-class")[i].style.display = "none"; } } } else { for (i = 0; classDiv.length > i; i++) document.getElementsByClassName("item-class")[i].style.display = "inline-block"; } } } </script>
Deepak Sharma
Asked 16-05-2019
45 Likes
Comments
Write comment

Submit your answer