How to search live data from div using javascript

how to search live data from div using javascript
Deepak Sharma
Asked 05-11-2019
21

Answer (1)
<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