我可以通过在过滤器字段中输入字母来设法显示匹配结果，但是当按下“退格键”（一一删除字母）时，可以显示相同的匹配结果。例如，如果在以下示例中键入“ K”，“ U”，“ S”，则会显示K和B行，但是如果我一一删除“ S”，“ U”，则结果应为任何带有“ K”字母的单词，在我的代码中都没有。
此外，在显示不匹配结果消息后，如果我将字母一一删除，结果将显示为空白而不是匹配结果。
$(function($) {
var list = { letters:[] };
var $ul = $("<ul></ul>").appendTo(".page-content");
$(".page-content").append("<p id='no_result_found'></p>");
$("nav.link-list a").each(function(itmLetter) {
var brandTitle = $(this).attr("title");
itmLetter = brandTitle.trim().substring(0, 1).toUpperCase();
if (list.letters.indexOf(itmLetter) < 0) {
list[itmLetter] = [];
list.letters.push(itmLetter);
$ul.append(
$("<li/>", {
"class": "AddContent",
"id": itmLetter,
"data-content": itmLetter
})
); // end of $ul.append()
} // end of if statement
// push letters to each nav-list
list[itmLetter].push($(this));
}); // end of alphabet list
list.letters.sort();
$("article.category-list").empty();
$.each(list.letters, function(i, letter){
list[letter].sort(function(a, b) {
return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
}); // end of letters.sort()
var ul = $("<ul/>");
$.each(list[letter], function(idx, itm){
ul.append(itm);
}); // end of .each()
$("article.category-list").append($("<nav/>").addClass("link-list").append($("<h3/>").addClass("alphabet").html(letter)).append(ul));
}); // end of .each()
$("li.AddContent").click(function() {
var al = $(this).attr("id");
$("nav.link-list").each(function(){
var brand = $(this).find("a").attr("title");
$(this).css("display", "none").filter(function(){
return brand.trim().substring(0, 1).toUpperCase() == al;
}).prependTo("article.category-list").fadeIn(500);
}); //end of each()
}); //end of click()
// filter field
$("input#searchTerm").on("keyup", function(){
var inputValue = $(this).val().toLowerCase();
var checkEmpty = [];
$("nav.link-list ul").children("a").each(function(){
var brand = $(this).attr("title");
if (brand.toLowerCase().indexOf(inputValue) > -1) {
checkEmpty.push('1');
$(this).fadeIn(800)
} else {
$(this).css("display", "none");
}
}); // end of .each()
if ($("nav.link-list ul").children("a").is("visible")) {$("nav.link-list ul").parent().addClass("active");}
if(checkEmpty.length == 0)
{
$('#no_result_found').html('Sorry, no matched result is found, please try again.');
}
else
{
$('#no_result_found').html('');
}
$('.link-list').each(function(){
var item=$(this);
if(item.find('a').get().length==item.find('a:hidden').get().length) {
item.hide();
}
else {
item.show();
}
});
if(inputValue.length==0){
$('.link-list').show();
}
}); // end of .on(keyup)
// no result
}); //end of script.AddContent:before {
content: attr(data-content);
}
.page-content h1 {
display: inline;
float: left;
}
/**** search field ****/
.page-content__body {
display: block;
float: right;
position: relative;
top: 24px;
width: 20%;
}
.search {
width: 100%;
position: relative
}
.searchTerm {
float: left;
padding: 5px;
outline: none;
color: #9DBFAF;
height: 28px !important;
border: none !important;
border-bottom: 1px solid #eaeaea !important;
padding: 0 4px !important;
}
.searchTerm:focus{
color: #00B4CC;
}
.searchButton {
position: absolute;
right: 0;
width: 20px;
height: 20px;
border: transparent;
background: transparent;
text-align: center;
color: #8e8e8e;
cursor: pointer;
font-size: 16px;
margin-top: 4px !important;
}
/*Resize the wrap to see the search bar change!*/
.brand-search-wrap{
width: 100%;
}
/**** Alpabet list ****/
.page-content ul {
list-style-type: none;
padding: 0 12px;
width: 100%;
display: flex;
border-bottom: 1px solid #eaeaea;
align-items: center;
flex-basis: 100%;
text-align: center;
justify-content: flex-start;
flex-wrap: wrap;
}
.page-content ul li {
cursor: pointer;
text-align: center;
display: flex;
flex-grow: 1;
padding: 12px 4px;
transition: 0.4s;
}
.AddContent:before {
content: attr(data-content);
display: block;
font-size: 20px;
margin: auto;
transition: 0.4s;
}
.page-content ul li:hover,
.page-content ul li:focus {
background-color: #444;
}
.AddContent:hover:before,
.AddContent:focus:before
{
color: #fff;
}
/*** link-list box ****/
.link-list.box {
padding: 0 0 2px 2px;
}
.link-list__header {
text-align: left;
padding: 0;
font-size: 1.25rem;
position: relative;
top: 8px;
left: 52px;
padding: 0;
min-height: 0 !important;
line-height: 1;
}
.link-list__background {
padding-top: 0;
height: 56px;
padding: 8px 0 0 16px;
}
.link-list__image {
width: 12% !important;
padding: 0;
position: relative;
bottom: 24px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Brands</h1>
<div class="brand-search-wrap">
<div class="search">
<input type="text" class="searchTerm" id="searchTerm" placeholder="Enter the brand name here">
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>
<div class="page-content"></div>
<article class="category-list">
<nav class="link-list">
<a href="/brands/abus" title="ABUS">ABUS</a>
</nav>
<nav class="link-list">
<a href="/brands/abus" title="ACC">ACC</a>
</nav>
<nav class="link-list">
<a href="/brands/abus" title="BUS">BUS</a>
</nav>
<nav class="link-list">
<a href="/brands/abus" title="BKUS">BKUS</a>
</nav>
<nav class="link-list">
<a href="/brands/abus" title="KUS">KUS</a>
</nav>
<nav class="link-list">
<a href="/brands/abus" title="SUK">SUK</a>
</nav>
<nav class="link-list">
<a href="/brands/abus" title="YUG">YUG</a>
</nav>
</article>
答案 0 :(得分：0)
问题的核心是':hidden' selector在jQuery中的工作方式。
这是您的概念失败的代码行：
if(item.find('a').get().length==item.find('a:hidden').get().length) {
在他看来，有问题的<a>元素本身可能是可见的（过滤正确地将display:none从其中删除了），但是当前可能隐藏了其父项nav.link-list，因此该元素本身仍与:hidden选择器匹配：
可以将元素视为隐藏的原因有几个：...
*祖先元素是隐藏的，因此该元素不会显示在页面上。
因此，您需要找到另一种标记隐藏元素的方法，例如使用某些CSS类对其进行标记。
如果您在这里需要进一步的帮助，请发回邮件。
更新
以下是代码的相关部分，已更新，以反映我建议的更改，其中用一些自定义类替换了:hidden选择器：
首先，除了显示/隐藏hidden元素之外，还要切换类<a>（注意addClass / removeClass语句）：
if (brand.toLowerCase().indexOf(inputValue) > -1) {
checkEmpty.push('1');
$(this).fadeIn(800).removeClass('hidden');
} else {
$(this).css("display", "none").addClass('hidden');
}
然后，检查此类而不是使用:hidden选择器（将:hidden替换为.hidden）：
if(item.find('a').get().length==item.find('a.hidden').get().length) {
就这么简单。