Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

301
Vistas
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
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda