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

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

This post is all about a bootstrap drop down list or we can say list with search facility and delete functionality as well.

In this post we are going to discuss about a component through which user can show the drop down list with search option facility and user also can delete the option by just clicking [X] sign besides every option.So let's see how we can achieve that.

You can see the live demo at live Demo

Jsfiddle URL : JSfiddle URL

The HTML file : 

<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>

JavaScript code :

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'));
});
});

CSS Code:

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

You can see the live demo at live Demo
Jsfiddle URL : JSfiddle URL

Enjoy...!!!

Feel free to comment below your experience with above approach and If you still find any problem with above steps Let me know I would love to help you to resolve your  problem.

If you want to take your Technological Knowledge to the Next Level and For More Technological information Stay tuned to Visionfortech