Bootstrap search drop down list or list with [X] sign to delete element

by Rodrigo Portillo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="dropdown" id="option_dropdown">
  <button
    class="btn btn-default btn-filter"
    type="button"
    id="savedSearch"
    data-toggle="dropdown"
    data-submenu=""
    aria-expanded="true"
    style="word-wrap: break-word"
  >
    <span id="filter_name">Selecione a TimeZone</span> <span class="caret"></span>
  </button>
  <input type="text" ng-model="crCtrl.credentials.timezone" style="display:none"/>
  <ul
    class="dropdown-menu"
    id="saveTimezone"
    style="max-height: 315px; overflow-y: scroll"
  ></ul>
</div>

CSS

#option_dropdown a{
  padding: 5px 10px;
  cursor: pointer;
}

JavaScript

var pra = "";
var timezones = ["America/Brasilia", "America/Sao_Paulo", "GMT3+"];
  
  
function inicializarSelect(timezones) {
  $("#saveTimezone").empty();
  $("#saveTimezone").append(
    '<li><input type="text" id="searchFilterInput" placeholder="Selecione um Timezone." title="Type in to searcg language option">'
  );


	
  timezones.forEach((timezone)=>{
    $("#saveTimezone").append(`<li style="height:35px" class=""><a id="${timezone}"  name="${timezone}">${timezone}</a></li>`);
  });
  
  
  $("#option_dropdown #savedSearch").click(()=>{
  	if($("#saveTimezone").css("display") != "block"){
    	$("#saveTimezone").show();
      $("#filter_name").focus();
    }else{
    	$("#saveTimezone").hide();
    }
  });
  

  $("#searchFilterInput").keyup(function () {
    var input, filter, ul, li, a, i;
    input = document.getElementById("searchFilterInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("saveTimezone");
    li = ul.getElementsByTagName("li");
    for (i = 1; i < li.length; i++) {
      a = li[i].getElementsByTagName("a")[0];
      if (a.name.toUpperCase().includes(filter)) {
        li[i].style.display = "";
      } else {
        li[i].style.display = "none";
      }
    }
  });
  $("#saveTimezone").on("click", "a", function (event) {
    var filterId = $(this).attr("id");
    if (pra == "") {
      $("#filter_name").text(filterId);
    } else {
      pra = "";
    }
    $("#searchFilterInput").val("");
    $("#option_dropdown input").val($(event.target).text());
  });

}

inicializarSelect(timezones);