I've created a search bar on my site with the code below. For some reason the value is not updating when the user clicks on a name in the dropdown options of the search bar. I've tried using .innerHTML and setAttribute() instead of .value and none of those update the actual text in the search bar. Any ideas what I could be doing wrong?
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>In your code, you changed the searchVal to a string, which does not refer to the input tag anymore, and thus would not have a value that you can set.
To fix, simply assign a new variable when you perform the 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");
});
}
}