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.
<div class="dropdown" id="option_dropdown" style="margin-left:20px;margin-top:20px">
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