Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

302
Views
Adjusting JS Live Search to show results regardless of word order

I created a simple javascript live search & disappear to filter names from a list, but now I'm running into trouble when someone searches for "John Smith" and can't find him because he's in the list as "John H. Smith". Is there anything I can add to the js code to have the search look for the input's contents regardless of word order or if there's a middle initial or middle name between the first name and last name?

Codepen for reference: https://codepen.io/naomimekeel/pen/rNzoeGQ

View the live page example: https://www.giveto.pitt.edu/s/1729/18/interior-giving.aspx?sid=1729&gid=2&pgid=5065

<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! Please check your spelling or try again.</div>

    <div rel="facstaff-data" id="facstaff-data">
        <div class="facstaff-data-item">+Terry Laughlin KGSB โ€™81 & Regina L. Aldisert</div>
<div class="facstaff-data-item">+Dr. W. Harry Archer, DEN โ€™27, A&S โ€™37 & +Mrs. Louise E. Archer, A&S โ€™27</div>
<div class="facstaff-data-item">+Lauren H. Ashe, A&S โ€™14</div>
</div>
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';
}
about 4 years ago ยท Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
ยฉ 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!