在 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

所以添加一个检查，看看你有没有。你真的应该使用三元来 return 一个值，而不是 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');
  }
}

Answer 2

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

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>

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

Displaying "No Results Found" on Javascript Live Search?

javascript

search

livesearch