Creé una búsqueda en vivo de JavaScript simple y desaparecí para filtrar nombres de una lista, pero ahora tengo problemas cuando alguien busca "John Smith" y no puede encontrarlo porque está en la lista como "John H. Smith" . ¿Hay algo que pueda agregar al código js para que la búsqueda busque el contenido de la entrada independientemente del orden de las palabras o si hay una inicial del medio o un segundo nombre entre el nombre y el apellido?
Codepen para referencia: https://codepen.io/naomimekeel/pen/rNzoeGQ
Vea el ejemplo de la página en vivo: 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'; }