Tuesday, June 13, 2017

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

No comments:

Post a Comment

Protected by Copyscape