使用 Input 和 DIV 搜索過濾器

Question

我創建了這個簡單的 JS 代碼來過濾“行”並按輸入中寫入的名稱進行搜索。

• 當我在輸入中寫入時，他會進行搜索，但總是進行相同的搜索。

有人可以幫忙嗎。。

這是輸入。

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

這是使用 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>";

這是用於過濾和查找的 JS 腳本...

<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

查看我的 Codepen 代碼段，它非常適合您的用例。 在這里，用戶可以輸入一個名稱，結果將在使用搜索文本過濾數據庫后顯示。 Codepen 鏈接： 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>