在 Javascript Live Search 上显示"No Results Found"？

Question

我使用了一个简单的代码笔(我的版本：https://codepen.io/naomimekeel/pen/rNzoeGQ)构建js实时搜索，但我需要一种显示"；抱歉，没有找到结果"消息，如果输入与任何列表项都不匹配。我知道这可能是一个简单的事件监听器，但我不擅长javascript，也找不到任何与这种特定过滤方式匹配的答案。最好的方法是什么？

<div class="facstaffsearchbar">
<input type="text"
id="facstaff-search"
name="facstaff-search"
rel="facstaff-search"
placeholder="🔍 Search for a donor on this list . . ."
/>
<div rel="facstaff-data" id="facstaff-data">
<div class="facstaff-data-item">+Terry Laughlin KGSB ’81 & Regina L. Aldisert<span style="display:none!important;"></span></div>
<div class="facstaff-data-item">+Dr. W. Harry Archer, DEN ’27, A&S ’37 & +Mrs. Louise E. Archer, A&S ’27<span style="display:none!important;"></span></div>
<div class="facstaff-data-item">+Lauren H. Ashe, A&S ’14<span style="display:none!important;"></span></div>
<div class="facstaff-data-item">+William R. Baierl, EDUC ’51<span style="display:none!important;">Bill, Willy</span></div>
<div class="facstaff-data-item">Bettye J. Bailey, CGS ’84 & +Ralph E. Bailey<span style="display:none!important;"></span></div>
</div>

const searchInput = document.querySelector('input[rel="facstaff-search"]');
searchInput.addEventListener('input', function (event) {
const input = event.target;  
const query = event.target.value;
const results = input.parentNode; 
const data = results.querySelectorAll(".facstaff-data-item"); 

if (input.value) 
{
for (let i = 0, len = data.length; i < len; i++) 
{
data[i].innerHTML.toLowerCase().includes(input.value.toLowerCase()) ? data[i].style.display = 'block' : data[i].style.display = 'none';
}
}
else {
for (let i = 0, len = data.length; i < len; i++)
{
data[i].style.display = 'block';
}
}
});

Answer 1

您可以这样做，创建一个变量来检查是否有任何匹配，如果有，则更新变量

let foundOne = false;
const none = document.getElementById('none');
const searchInput = document.querySelector('input[rel="facstaff-search"]');
const data = document.querySelectorAll(".facstaff-data-item");
show(false);
searchInput.addEventListener('input', function (event) {
// reset state
show(false)
foundOne = false;
const input = event.target
if (input.value) {
const toMatch = input.value.toLowerCase();
for (let i = 0, len = data.length; i < len; i++) {
const match = data[i].innerHTML.toLowerCase().includes(toMatch);
data[i].style.display = match ? 'block' : 'none';
if (match) foundOne = true;
}
if (!foundOne) show(true);
} else 
resetState()
});
function resetState() {
for (let i = 0, len = data.length; i < len; i++)
data[i].style.display = 'block';

}
function show(bool) {
none.style.display = bool ? 'block' : 'none';
}

<div class="facstaffsearchbar">
<input type="text"
id="facstaff-search"
name="facstaff-search"
rel="facstaff-search"
placeholder="🔍 Search for a donor on this list . . ."
/>
<div id="none">sorry no results found</div>
<div rel="facstaff-data" id="facstaff-data">
<div class="facstaff-data-item">+Terry Laughlin KGSB ’81 & Regina L. Aldisert<span style="display:none!important;"></span></div>
<div class="facstaff-data-item">+Dr. W. Harry Archer, DEN ’27, A&S ’37 & +Mrs. Louise E. Archer, A&S ’27<span style="display:none!important;"></span></div>
<div class="facstaff-data-item">+Lauren H. Ashe, A&S ’14<span style="display:none!important;"></span></div>
<div class="facstaff-data-item">+William R. Baierl, EDUC ’51<span style="display:none!important;">Bill, Willy</span></div>
<div class="facstaff-data-item">Bettye J. Bailey, CGS ’84 & +Ralph E. Bailey<span style="display:none!important;"></span></div>
</div>
</div>

Answer 2

所以添加一个检查，看看是否有。你真的应该使用三进制来返回一个值，而不是作为if/else

let hasMatches = false;
if (input.value) {
const textLC = input.value.toLowerCase();
for (let i = 0, len = data.length; i < len; i++) {
const dataMatch = data[i].innerHTML.toLowerCase().includes(textLC);
data[i].style.display = dataMatch ? 'block' : 'none';
hasMatches = hasMatches || dataMatch;
}
if (!hasMatches) {
console.log('NOPE');
}
}