Search Filter using Input and DIV

Question

I created this simple JS code to Filter the "rows" and search by the name writed in the input.

• When i write in the input he make a search, but always the same search.

Can someone help..

This is the input.

<input id='myInput' type='text' class='form-control' placeholder='Pesquisar por R-ID...'>

This is the row for looping using WHILE()

echo "<div class='row' id='table_row'><div class='col-md-12 track clearfix'><div class='panel panel-default'><div class='panel-heading'>R-$repair_id - <h4 class=''>$repair_model</h4> <a href='repairlist.php?id=$repair_id' class='btn btn-default btn-xs move right-id'> Ver Ficha</a> <a href='#' class='btn btn-primary btn-xs move right-id'>Nova Entrada</a></div><div class='panel-body'><p><small>$repair_date</small></p><p>$repair_desc_problem</p></div></div></div></div>";

This is JS script to filter and find...

<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#table_row").filter(function() {
  $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
});
});  
</script>

Answer 1

Check out my Codepen snippet that perfectly fit for your use case. Here the User can enter a name and the results will be shown after filtering the database with search text. Codepen Link: https://codepen.io/pro_animator/pen/zJpZxd

 var inputElement = document.getElementById("searchDropdown"); var resultsElement = document.getElementById("searchResults"); var lowerCaseData, filteredData; var data = [ { name: "Satya", age: 25 }, { name: "Rahul", age: 22 }, { name: "Ronny", age: 24 }, { name: "Abc ", age: 20 }, { name: "Martha", age: 22 }, { name: "Broady", age: 27 } ]; inputElement.addEventListener("input", function(e) { while (resultsElement.hasChildNodes()) { resultsElement.removeChild(resultsElement.firstChild); } filteredData = data.filter(function(person) { return person.name.toLowerCase().includes(e.target.value.toLowerCase()); }); populateDropdown(filteredData); }) // Function to create search result dom. function populateDropdown(result) { var liElement, textNode; var frag = document.createDocumentFragment(); result.forEach(function(resultRow) { liElement = document.createElement("li"); textNode = document.createTextNode(resultRow.name + "(age:" + resultRow.age + ")"); liElement.appendChild(textNode); frag.appendChild(liElement); }) resultsElement.appendChild(frag); }

 body { background: #42bad2; display: flex; justify-content: center; align-items: center; height: 100vh; } input { /* width: 200px; */ box-sizing: border-box; padding: 0.5em; border-radius: 6px; font-size: 1.5em; width: 100%; } ul { list-style: none; padding: 5px 0 0; } ul li { background: #eee; margin: 5px 0; box-sizing: border-box; padding: 0.25em; border-radius: 6px; font-size: 1.4em; width: 100%; }

 <div> <input id="searchDropdown" type="text" placeholder="Type a name(ex: satya)"/> <ul id="searchResults"></ul> </div>