JQuery - 过滤下拉列表，如果未找到结果，则插入文本

Question

我已经将我在网上找到的一些代码改编成jquery函数。这对我来说效果很好，但是如果过滤器没有任何匹配项，我希望显示"未找到结果"文本。

另外，我将如何将其转换为可以通过传递多个搜索的输入和下拉列表 ID 来运行的函数？

$("#devSearch").keyup(function() {
filter = $("#devSearch").val().toUpperCase()
div = $("#devDropdown")
a = div.find("a")
for (i = 0; i < a.length; i++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Devices</a>
<div class="dropdown-menu dropdown-menu-fixed-height" id="devDropdown">
<input class="form-control form-control-sm" type="text" placeholder="Search..." id="devSearch" style="width:8rem; margin:0 1rem">
<a class="dropdown-item" href="#">All Entires</a>
<a class="dropdown-item" href="#">Big bob</a>
<a class="dropdown-item" href="#">Little bob</a>
<a class="dropdown-item" href="#">Sausage</a>
<a class="dropdown-item" href="#">Chicken</a>
<span class="filter-results no-results">Oops, nothing found!<span>
</div>
</li>
</ul>

JS小提琴演示。

Answer 1

一种方法是在HTML中添加另一个元素：

然后将以下 jQuery 片段添加到函数中：

// selecting the <a> element with the classes of both
// 'dropdown-item' and 'no-results', using the toggle(switch)
// method to show/hide appropriately:
$('a.dropdown-item.no-results').toggle(
// here we find select all <a> elements with the class of
// 'dropdown-item' excluding the item(s) with the class of
// 'no-results' that match the :visible jQuery/Sizzle selector;
// we then find the length of that collection and, if that length
// is equal to zero the 'a.dropdown-item.no-results element is
// is shown, otherwise it's hidden:
$('a.dropdown-item:not(.no-results):visible').length === 0
);

$("#devSearch").keyup(function() {
filter = $("#devSearch").val().toUpperCase()
div = $("#devDropdown")
a = div.find("a")
for (i = 0; i < a.length; i++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "initial";
} else {
a[i].style.display = "none";
}
$('a.dropdown-item.no-results').toggle(
$('a.dropdown-item:not(.no-results):visible').length === 0
);
}
});

a.dropdown-item.no-results {
text-decoration: none;
display: none;
color: lightgrey;
cursor: not-allowed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Devices</a>
<div class="dropdown-menu dropdown-menu-fixed-height" id="devDropdown">
<input class="form-control form-control-sm" type="text" placeholder="Search..." id="devSearch" style="width:8rem; margin:0 1rem">
<a class="dropdown-item" href="#">All Entires</a>
<a class="dropdown-item" href="#">Big bob</a>
<a class="dropdown-item" href="#">Little bob</a>
<a class="dropdown-item" href="#">Sausage</a>
<a class="dropdown-item" href="#">Chicken</a>
<a class="dropdown-item no-results">No results found</a>
</div>
</li>
</ul>

Answer 2

添加到您的HTML

<p id="no-results" style="display:none">No results found</p>

然后这个对于javascript：

$("#devSearch").keyup(function() {
matchesFound = false;
filter = $("#devSearch").val().toUpperCase();
div = $("#devDropdown");
noResults = div.find("#no-results");
a = div.find("a");
for (i = 0; i < a.length; i++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
matchesFound = true;
} else {
a[i].style.display = "none";
}
}
if(matchesFound == false) {
noResults.show();
} else {
noResults.hide();
}
});

https://jsfiddle.net/gz7bmdsh/

Answer 3

此示例创建一个变量，用于计算可见的下拉项

$('.placholder').hide();
$("#devSearch").keyup(function() {
var count = 0;//create variable
filter = $("#devSearch").val().toUpperCase()
div = $("#devDropdown")
a = div.find("a")
for (i = 0; i < a.length; i++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
// count visible items
$('.dropdown-item:visible').each(function(){
count++;
});
// hide and show
if(count === 0){
$('.placholder').show();
} else {
$('.placholder').hide();
}

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Devices</a>
<div class="dropdown-menu dropdown-menu-fixed-height" id="devDropdown">
<input class="form-control form-control-sm" type="text" placeholder="Search..." id="devSearch" style="width:8rem; margin:0 1rem">
<p class="placholder">No results</p>
<a class="dropdown-item" href="#">All Entires</a>
<a class="dropdown-item" href="#">Big bob</a>
<a class="dropdown-item" href="#">Little bob</a>
<a class="dropdown-item" href="#">Sausage</a>
<a class="dropdown-item" href="#">Chicken</a>

</div>
</li>
</ul>

Answer 4

尝试此操作以表示"未找到结果"。

$("#devSearch").keyup(function() {
filter = $("#devSearch").val().toUpperCase()
div = $("#devDropdown")
a = div.find("a")

for (i = 0; i < a.length; i++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";

} else {
a[i].style.display = "none";
}
var test=$(".dropdown-item").filter(function () {
return $(this).css("display") == "none";});
if(test.length==a.length){
$(".noData").html("no results found");
}
else{
$(".noData").html("");
}
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Devices</a>
<div class="dropdown-menu dropdown-menu-fixed-height" id="devDropdown">
<input class="form-control form-control-sm" type="text" placeholder="Search..." id="devSearch" style="width:8rem; margin:0 1rem">
<a class="dropdown-item" href="#">All Entires</a>
<a class="dropdown-item" href="#">Big bob</a>
<a class="dropdown-item" href="#">Little bob</a>
<a class="dropdown-item" href="#">Sausage</a>
<a class="dropdown-item" href="#">Chicken</a>
</div>
<div class="noData"></div>
</li>
</ul>