在Javascript實時搜索上顯示“未找到結果”？

我按照一個簡單的 codepen（我的版本：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';
            }
        }
});

uj5u.com熱心網友回復：

所以添加一個檢查，看看你有沒有。你真的應該使用三元來回傳一個值，而不是作為一個 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');
  }
}

uj5u.com熱心網友回復：

你可以做這樣的事情，創建一個變數來檢查是否有任何匹配或不，如果有任何更新變數

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);
}

});

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>

標籤：javascript 搜索 实时搜索

上一篇：在組件加載之前更新背景關系狀態

下一篇：如何在時間線上確定某事是否開始