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.

Bootstrap search drop down list or list with [X] sign to delete element,visionfortech,visionfortech latest blog,visionfortech latest post

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>
<ul class="dropdown-menu" id="saveLanguageUl"  style="max-height: 315px;overflow-y: scroll;"></ul>

JavaScript code :

var pra="";
   $("#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>');
    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];
                      li[i].style.display = "";
                  } else {
                      li[i].style.display = "none";

$('#saveLanguageUl').on('click', 'a', function(event) {
var filterId = $(this).attr('id');
if(pra == ""){
pra = "";

$('#saveLanguageUl').on('click', 'span.deleteOptionBtn', function(event) {

var filterId = $(this).attr('id');
pra = filterId;
$("#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


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