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

by Pratik Soni

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" style="margin-left:20px;margin-top:20px">
<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">Select Language</span> <span class="caret"></span>
										</button>
										<ul class="dropdown-menu" id="saveLanguageUl"  style="max-height: 315px;overflow-y: scroll;"></ul>
									</div>

CSS

#searchFilterInput {
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 15px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

JavaScript

var pra="";
$(document).ready(function(){
	 $("#saveLanguageUl").empty();
   $("#saveLanguageUl").append('<li><input type="text" id="searchFilterInput" placeholder="Search for Language.." title="Type in to searcg language option">');
   var language = ["angular.js","backbone.js","d3.js","amcharts.js","jquery.js","bootstrap.js","bootstrap.css","mabbox.js","python","php","ajax","json"];
   
    for(var i = 0; i < language.length; i++) {
							  $("#saveLanguageUl").append('<li style="height:35px" class=""><a href="#" id='+language[i]+' name='+language[i]+'>'+language[i]  +'   <span style="float:right;" class="deleteOptionBtn glyphicon glyphicon-remove-sign" title="Delete '+language[i]+' Filter" id='+language[i]+'><br></span></a></li>');
					}
          
          $("#searchFilterInput").keyup(function(){
    				var input, filter, ul, li, a, i;
    				input = document.getElementById("searchFilterInput");
    				filter = input.value.toUpperCase();
    				ul = document.getElementById("saveLanguageUl");
    				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";

                  }
              }
          })
			$('#saveLanguageUl').on('click', 'a', function(event) {
		var filterId = $(this).attr('id');
		if(pra == ""){
			$("#filter_name").text(filterId);
		}
		else{
			pra = "";
		}
		$("#searchFilterInput").val("");
	});
	
	$('#saveLanguageUl').on('click', 'span.deleteOptionBtn', function(event) {
		
		var filterId = $(this).attr('id');
		pra = filterId;
		$(this).closest("li").remove();
		$("#filter_name").text($(this).attr('Select Saved Filter'));
	});
});