search select dropdown code example

Example 1: searchable dropdown bootstrap

<select class="selectpicker" data-live-search="true">
  <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
  <option data-tokens="mustard">Burger, Shake and a Smile</option>
  <option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>

Example 2: multiple search selection dropdown

<div class="row">
  <div class="col-md-12">

    <select class="mdb-select colorful-select dropdown-primary md-form" multiple searchable="Search here..">
      <option value="" disabled selected>Choose your country</option>
      <option value="1">USA</option>
      <option value="2">Germany</option>
      <option value="3">France</option>
      <option value="4">Poland</option>
      <option value="5">Japan</option>
    </select>
    <label class="mdb-main-label">Label example</label>
    <button class="btn-save btn btn-primary btn-sm">Save</button>

  </div>
</div>

Example 3: search in dropdown

function formatState (state) {
  if (!state.id) {
    return state.text;
  }
  var baseUrl = "/user/pages/images/flags";
  var $state = $(
    '<span><img src="' + baseUrl + '/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
  );
  return $state;
};

$(".js-example-templating").select2({
  templateResult: formatState
});