Creé una barra de búsqueda en mi sitio con el siguiente código. Por alguna razón, el valor no se actualiza cuando el usuario hace clic en un nombre en las opciones desplegables de la barra de búsqueda. Intenté usar .innerHTML y setAttribute() en lugar de .value y ninguno de ellos actualiza el texto real en la barra de búsqueda. ¿Alguna idea de lo que podría estar haciendo mal?
const list = document.querySelector(".list"); function searchMembers() { // get search value from search box list.classList.add("show"); let searchVal = document.getElementById('userField'); let members = document.getElementsByClassName('member-list-item'); searchVal = searchVal.value.toUpperCase(); for (let i = 0 ; i < members.length; i++) { console.log(members[i].textContent) let text = members[i].textContent; text = text.toUpperCase(); if (text.includes(searchVal)) { members[i].style.display = ""; } else { members[i].style.display = "none"; } members[i].addEventListener('click', () =>{ console.log(`${members[i].textContent} was clicked`); searchVal.value = members[i].textContent; list.classList.remove("show"); }); } } .list-box { position: relative; display: flex; flex-basis: 100%; } .list { transform: translate(0,40px); display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .member-list-item { color: black; padding: 12px 16px; text-decoration: none; display: block; } .member-list-item:hover { background-color: #ddd; } .show { display: block; } <div class="list-box"> <input type="text" placeholder="Search for user" class="form-field" id="userField" onkeyup="searchMembers()"> <div class="list"> <p class="member-list-item">Victoria Chambers</p> <p class="member-list-item">Dale Byrd</p> <p class="member-list-item">Dawn Wood</p> <p class="member-list-item">Dan Oliver</p> </div> </div>En su código, cambió el valor de searchVal a una cadena, que ya no hace referencia a la etiqueta de entrada y, por lo tanto, no tendría un valor que pueda establecer.
Para solucionarlo, simplemente asigne una nueva variable cuando realice toUpperCase() .
const list = document.querySelector(".list"); function searchMembers() { // get search value from search box list.classList.add("show"); let searchVal = document.getElementById('userField'); let members = document.getElementsByClassName('member-list-item'); // Here you changed the searchVal to something else // searchVal = searchVal.value.toUpperCase(); let searchValLowerCase = searchVal.value.toUpperCase(); for (let i = 0 ; i < members.length; i++) { console.log(members[i].textContent) let text = members[i].textContent; text = text.toUpperCase(); // changed here to the new variable name if (text.includes(searchValLowerCase)) { members[i].style.display = ""; } else { members[i].style.display = "none"; } members[i].addEventListener('click', () =>{ console.log(`${members[i].textContent} was clicked`); searchVal.value = members[i].textContent; list.classList.remove("show"); }); } }