In this tutorial i will let you know how to create dropdown list with Rich UI. Normally HTML provide simple SELECT element to create dropdown list.
In this tutorial you will learn how to create dropdown list with search functionality with help of excellent ‘chosen’ jquery plugin, you can download Here.
Below are simple example to learn dropdown list with search functionality.
Step 1: First we will add library file of chosen plugin.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
<head>
<style>
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}
</style>
<link rel="stylesheet" href="chosen/chosen.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="chosen/chosen.jquery.js" type="text/javascript"></script>
</head>
Step 2: Now we will add HTMl dropdown list.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
<div>
<select data-placeholder="Choose a Country..." class="chzn-select" style="width:350px;" tabindex="2">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
</div>
Step 3: Finally call chosen library method to apply css and functionality on dropdown list.
1 2 3 4 5 6 7 8 9 10 11
<script type="text/javascript">
jQuery(document).ready(function(){
$("#choDDL").chosen();
$(".chzn-select-deselect").chosen({allow_single_deselect:true});
});
</script>
Step 4: Result :
