div內的可點擊選項

我想讓 div 內的選項元素標簽可點擊。更像是一個選擇標簽。您可能會想，為什么我不能使用選擇元素。就我而言，我需要一個帶有選單的搜索欄。因此我使用了一個輸入。我通過以下方式進行了嘗試。似乎 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";
                        }
                    }
                }

uj5u.com熱心網友回復：

@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>

uj5u.com熱心網友回復：

為什么要重新發明輪子？

HTML 已經涵蓋了您。使用 a 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>

標籤：javascript html css

上一篇：正則運算式將物件包含在陣列中

下一篇：通過UrlParams將陣列發送到Controller操作