Clickable options inside a div-CodePudding

I want to make the option element tags inside a div clickable. More like a select tag. You might think, why I cannot use a select element. In my case, I need a search bar with a menu. Therefore I have used an input. I tried it in the following way. Seems like the value attribute isn't assignable and it is not clickable. Does anyone have any idea about this?

html:

<input id="searchInput" list="searchList" type="text" placeholder="Search.." onkeyup="filterFunction()">
<div id="searchList" >
</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";
                        }
                    }
                }

CodePudding user response：

Great answer by @connexo Another way is to use event bubbling and add event listener to the div itself and then you can get the target to check which option was clicked.

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" >
</div>

CodePudding user response：

Why reinvent the wheel?

HTML has you covered already. Use a datalist, which already comes with matching suggestions that are clickable:

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>