Javascript 搜索栏的输入值未更新

Question

我使用以下代码在我的网站上创建了一个搜索栏。出于某种原因，当用户单击搜索栏下拉选项中的名称时，该值不会更新。我试过使用 .innerHTML 和 setAttribute() 而不是 .value 和 none 更新搜索栏中的实际文本。知道我可能做错了什么吗？

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>

Answer 1

在您的代码中，您将 searchVal 更改为一个字符串，它不再引用输入标签，因此不会有您可以设置的值。
要修复，只需在执行 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");
    });

    }
}

Javascript 搜索栏的输入值未更新

Javascript input value of search bar not updating

html

javascript

css

input

searchbar