div 內的可點擊選項

Question

我想讓 div 中的選項元素標簽可點擊。 更像是 select 標簽。 您可能會想，為什么我不能使用 select 元素。 就我而言，我需要一個帶有菜單的搜索欄。 因此我使用了一個輸入。 我通過以下方式嘗試了它。 似乎 value 屬性不可分配且不可單擊。 有人對此有任何想法嗎？

html：

<input id="searchInput" list="searchList" type="text" placeholder="Search.." onkeyup="filterFunction()">
<div id="searchList" class="dropdown-content">
</div>

javascript：

    function fillList(elementIdentifier, data) {
        const list = document.querySelector(elementIdentifier);
        
        data.errorMessages.forEach(element => {
            
            const option = document.createElement('option');
            option.value = element.MessageId;
            option.label = element.namespace + ": " + element.message;

            list.appendChild(option);
        });
    }

    function filterFunction() {
                    
                    var input, filter, ul, li, a, i;
                    input = document.getElementById("searchInput");
                    filter = input.value.toUpperCase();
                    div = document.getElementById("searchList");
                    a = div.getElementsByTagName("option");
                    for (i = 0; i < a.length; i++) {
                        txtValue = a[i].textContent || a[i].innerText;
                        if (txtValue.toUpperCase().indexOf(filter) > -1) {
                            a[i].style.display = "";
                        } else {
                            a[i].style.display = "none";
                        }
                    }
                }

Answer 1

@connexo 的好答案另一種方法是使用事件冒泡並將事件偵聽器添加到 div 本身，然后您可以獲得目標以檢查單擊了哪個選項。

 function fillList(elementIdentifier) { const list = document.querySelector(elementIdentifier); var data = { errorMessages: [{ "MessageId": "x", "namespace": "x", "message": "Stack" }, { "MessageId": "y", "namespace": "y", "message": "Overflow" } ] }; data.errorMessages.forEach(element => { const option = document.createElement('option'); option.value = element.MessageId; option.label = element.namespace + ": " + element.message; list.appendChild(option); }); } fillList("#searchList") var div = document.getElementById("searchList"); div.addEventListener('click', (e) => { console.log(e.target.value); }); function filterFunction() { var input, filter, ul, li, a, i; input = document.getElementById("searchInput"); filter = input.value.toUpperCase(); a = div.getElementsByTagName("option"); for (i = 0; i < a.length; i++) { txtValue = a[i].label; if (txtValue.toUpperCase().indexOf(filter) > -1) { a[i].style.display = ""; } else { a[i].style.display = "none"; } } }

 <input id="searchInput" list="searchList" type="text" placeholder="Search.." onkeyup="filterFunction()"> <div id="searchList" class="dropdown-content"> </div>

Answer 2

為什么要重新發明輪子？

HTML 你已經覆蓋了。 使用datalist ，它已經帶有可點擊的匹配建議：

 const s = document.getElementById('searchCountries'); const countries = ['USA', 'UK', 'Germany', 'India', 'Finland', 'Canada']; for (const country of countries) { const o = document.createElement('option'); o.value = country; s.append(o); }

 <input type="search" list="searchCountries" /> <datalist id="searchCountries"></datalist>