我创建了这个简单的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>
查看我的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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句