How to made a searchable drop down

Question

So i made a dropdown using bootstrapp.

The code i took here : http://getbootstrap.com/docs/4.0/components/dropdowns/

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Now i want to add a search box inside the dropdown list , so that people can type in and it will shorten to a more proper dropdown list.

I try to find many ways , some of them using external plugin like Select2, however , they need a dropdown coded by using <select> and <option> tag . In contrast , my code use button and built-in dropdown class of Bootstrapp.

Anyone please help me .

Do you want the dropdown list to filter based on the input in the search field? Or do you have problems with the html, to put a input field in a dropdown? — Martin Lindgren, Sep 27 '17 at 11:58
yes i want the dropdown list to filter based on the input search — Jake Lam, Sep 28 '17 at 03:14

score 1 · Answer 1 · answered Sep 28 '17 at 13:31

When I want to sort lists, I use list.js. Here is an example of how you could solve your problem with having a Boostrap-4 dropdown with a list that you can filter:

https://jsfiddle.net/o9b17p2d/29/

HTML:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2" id="dropdown-sorted-list">
    <ul class="dropdown-menu-list list">
      <li>
        <button class="dropdown-item dropdown-item-name" type="button">Action</button>
      </li>
      <li>
        <button class="dropdown-item dropdown-item-name" type="button">Another action</button>
      </li>
    </ul>
    <input type="text" class="form-control dropdown-item search" placeholder="Filter" aria-label="Filter" aria-describedby="basic-addon1">
  </div>
</div>

JS: See Example 5 in the list.js documentation on how the set up list.js.

$(document).ready(function() {
  var options = {
    valueNames: ['dropdown-item-name']
  };

  var hackerList = new List('dropdown-sorted-list', options);
});

CSS:

.dropdown-menu-list {
  list-style-type: none;
  padding-left: 0;
}

As you can read in the Bootstrap 4 documentation for dropdowns, it is possible to use <button> elements in the dropdown.

He is asking for searchable dropdown. ` and the list should come as dropdown on `keypress` or `keyup` event, and only thise list should appear which should match with the input string. — Shashi Ranjan, Oct 07 '22 at 07:04

score 1 · Accepted Answer · answered Sep 29 '17 at 03:30

thanks guys for helping , i have found the solution . ill post here for anyone who needs

function searchBox() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";

        }
    }
}

How to made a searchable drop down

2 Answers2