Clickable options inside a div

Question

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" 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";
                        }
                    }
                }

score 1 · Accepted Answer · answered Apr 22 '22 at 08:11

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" class="dropdown-content">
</div>

Thank you. How I can get the clicked value into the input field? — Kalpani Ranasinghe, Apr 22 '22 at 08:29

score 0 · Answer 2 · answered Apr 22 '22 at 07:52

0

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>

answered Apr 22 '22 at 07:52

connexo

53,704
14
91
128

1

Could this be styled with custom CSS? Just a question – Anurag Srivastava Apr 22 '22 at 08:05
2

@AnuragSrivastava I don't have the highest hopes for that. https://stackoverflow.com/questions/13693482/is-there-a-way-to-apply-a-css-style-on-html5-datalist-options and here's an attempt: https://dev.to/siddev/customise-datalist-45p0 – connexo Apr 22 '22 at 08:10
@connexo Thanks. But I cannot use that since when I tried it inside the vscode extension, it detaches the datalist from the search bar. Tried to fix it. It didn't work. That's why I tried to implement it in this way – Kalpani Ranasinghe Apr 22 '22 at 08:14

Clickable options inside a div

2 Answers2