CODEWITHSUNDEEP
javascriptsearchlivesearch
Panther Naomi
Panther Naomi

Reputation: 3

Displaying "No Results Found" on Javascript Live Search?

I followed a simple codepen (my version: https://codepen.io/naomimekeel/pen/rNzoeGQ) to build a js live search, but I need a way to display a "Sorry, no results found" message if the input doesn't match any of the list items. I know this is probably a simple event listener but I am not competent in javascript and can't find any answers that match this specific way of filtering. What is the best way to do this?

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

Upvotes: 0

Views: 554

Answers (2)

AnanthDev
AnanthDev

Reputation: 1828

You could do something like this, create a variable to check whether there are any matches or not, if any update the variable

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>

Upvotes: 0

epascarello
epascarello

Reputation: 207557

So add a check to see if you have any. And you really should use ternary to return a value, not as an 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');
  }
}

Upvotes: 0

Related Questions