Custom Search

by Zuhaib Siddiqui

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="input-group-btn">
          <select class="form-control btn btn-default" id="searchdsmrCat" name="c">
            <option value="">All</option>
            <option value="2">Celebrity</option>
            <option value="3">Channel</option>
            <option value="4">Company</option>
            <option value="5">Title</option>
            <option value="1">People</option>
           </select>
    </div>

JavaScript

var options = Array();
var searchList = '<div class="dropdown"><ul class="dropdown-menu listing"><ul></div>';
$('.listing li:first-child').addClass('selected');
$('#searchdsmrCat').after(searchList);

$('#searchdsmrCat option').each(function(i){
		options[i] = $(this).html();
  	$(this).each(function(j){
  		$('.listing').append('<li data-trig="'+options[i]+'">'+options[i]+'</li>');
  	});
  });

  $('.listing li').click(function(){
  	var getAttr = $(this).attr('data-trig');
    alert(getAttr);
  })