Select Box with Search Option Jquery

Today i am going to tell you how to create select box with search option. In this select box when you start type the key it suggest the related option for the option box using jquery. This example really helpful when the bulk amout of data, You no need to browse the data in select box , when you start type the word it is suggest the better word from the option from selectbox.

Here i given demo page you can visit and see how it works and you can customize your code as you want. This is very simple and useful. I hope this example very useful to the developers to develop this kind of select box.



searchable select box jquery

Code for searchable select box :

<html lang="en">
<head>
<title>Selectbox with search option | sanwebcorner.com</title>  
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="choosen.js"></script>
</head>
<body>
<div style="width:520px;margin:0px auto;margin-top:30px;">
<h2>Select Box with Search Option Jquery</h2>
<select class="chosen" style="width:500px;">
<option>Html</option>
<option>Css</option>
<option>Css3</option>
<option>Php</option>
<option>MySql</option>
<option>Javascript</option>
<option>Jquery</option>
<option>Html5</option>
<option>Wordpress</option>
<option>Joomla</option>
<option>Druple</option>
<option>Json</option>
<option>Angular Js</option>
</select>
</div>
<script type="text/javascript">
$(".chosen").chosen();
</script>
</body>
</html>

Post a Comment

0 Comments