autocomplete for dropdown button

by Akram kamal

HTML

<dl id="sample" class="dropdown">
        <dt><a href="#"><span>Select</span></a></dt>
        <dd>
    <ul class="scrollbar" id="ex3">
	<input type="text" id="tbCountries" />
        <li><a href="#">india</a></li>
        <li><a href="#">australia</a></li>
        <li><a href="#">argentena</a></li>
        <li><a href="#">chile</a></li>
        <li><a href="#">sanfransisco</a></li>
        <li><a href="#">sydne</a></li>
        <li><a href="#">singapoor</a></li>
        <li><a href="#">delhi</a></li>
        <li><a href="#">goorgon</a></li>
        <li><a href="#">usa</a></li>
        <li><a href="#">china</a></li>
        <li><a href="#">srilanka</a></li>
        <li><a href="#">simla</a></li>
        <li><a href="#">maharastra</a></li>
        <li><a href="#">tamilnadu</a></li>
        <li><a href="#">orissa</a></li>
        <li><a href="#">ireland</a></li>
        <li><a href="#">uae</a></li>
        
    </ul>
	 </dd>
    </dl>
</div>

CSS

#sample
{
height: 4%;
  width: 19%;
  border: 1px solid black;
  display:block;
  text-align: center;
}
 .dropdown dd ul { 
background: rgba(228, 223, 203, 0) none repeat scroll 0 0;
  border: 1px solid rgba(18, 17, 16, 0.18);
  color: #C5C0B0;
  display: none;
  left: 12px;
  padding: 1px 0px;
  padding-top: 0%;
  position: absolute;
  top: -12px;
  width: 17%;
  min-width: 88px;
  list-style: none;
  margin-top: 5%;
  }

 .dropdown dd ul li a 
 {
 display: block;
  color: black;
  font-weight: bold;
  margin-top: 0%;
  border: 1px solid rgba(0, 0, 0, 0);
  }
  .dropdown a
  {
  text-decoration: none;
  }
  .dropdown dt a span
  {
  display: block;
  }
  .dropdown dt a:hover 
  {
  color:red;

  }
  .dropdown a:hover 
  {
  background-color:rgb(124, 88, 88);
  -webkit-animation: fadein 2s;
  }
  @-webkit-keyframes fadein { 
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
  
 .scrollbar{
width:150px;
height:90px;
background-color:lightgray;
margin-top:40px;
margin-left:-6px;
overflow-y:scroll;
float:left;
}
#ex3::-webkit-scrollbar{
width:16px;
background-color:#cccccc;
}
#ex3::-webkit-scrollbar-thumb{
background-color:#B03C3F;
border-radius:22px;
}
#ex3::-webkit-scrollbar-thumb:hover{
background-color:#BF4649;
border:1px solid #333333;
}
#ex3::-webkit-scrollbar-thumb:active{
background-color:#A6393D;
border:1px solid #333333;
}
#ex3::-webkit-scrollbar-track{
border:1px gray solid;
border-radius:10px;
-webkit-box-shadow:0 0 6px gray inset;
}

JavaScript

$("document").ready(function() {

            $(".dropdown dt a").hover(function() {
                $(".dropdown dd ul").slideDown("slow");
				
            });
                        
            $(".dropdown dd ul li a").click(function() {
                var text = $(this).html();
                $(".dropdown dt a span").html(text);
                $(".dropdown dd ul").slideUp("slow");
               
            });
            $(document).bind("click", function(e) {
                var $clicked = $(e.target);
                if (! $clicked.parents().hasClass("dropdown"))
                    $(".dropdown dd ul").fadeOut(1000);
					
            });   
    
    $("#tbCountries").keyup(function () {
    var re = new RegExp($(this).val(), "i")
    $('#ex3 li').each(function () {
        var text = $(this).text(),
            matches = !! text.match(re);
        $(this).toggle(matches)
    })
})

});