javascriptsearchlivesearch

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

Solution

  • 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>