In this tutorial, i will let you know how to create a dropdown list with Rich UI. Normally HTML provides a simple SELECT element to create a dropdown list.
Here, you will learn how to create a dropdown list with search functionality with help of excellent 'chosen'
jquery plugin, you can download chosen from Here.
Also checkout other tutorials of select2,
Step 1: First we will add the library file of the chosen plugin.
<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>
Here we have include chosen.css
and chosen.js
file with jQuery dependency.
Step 2: Now we will add the HTML drop-down list.
<div> <select class="chzn-select" style="width: 350px;" tabindex="2" data-placeholder="Choose a Country..."> <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>
We have created a simple HTMl option list and added class chzn-select
.
Step 3: Finally call chosen library method to apply css
and functionality on the dropdown list.
<script type="text/javascript"> $(document).ready(function(){ $("select").chosen({allow_single_deselect:true}); }); </script>
We have applied chosen
method on all select
elements, You can apply on '#selectid'
or '.ClassName'
.
Please feel free to send queries to me using below comment section.
This tutorial helps integrate a PHP SDK with Laravel. We'll install aws-php-sdk into laravel application and access all aws services… Read More
in this quick PHP tutorial, We'll discuss php_eol with examples. PHP_EOL is a predefined constant in PHP and represents an… Read More
This Laravel tutorial helps to understand table Relationships using Elequonte ORM. We'll explore laravel table Relationships usage and best practices… Read More
We'll explore different join methods of Laravel eloquent with examples. The join helps to fetch the data from multiple database… Read More
in this Laravel tutorial, We'll explore valet, which is a development environment for macOS minimalists. It's a lightweight Laravel development… Read More
I'll go through how to use soft delete in Laravel 10 in this post. The soft deletes are a method… Read More
View Comments
hi, thanks for the tutorial, but i am not able to type anything in input field as you show in your example image. what to do now.
Thanks
you need to set z-index value.
Hello,
i have download that but not get anu choosen.css and chosen.js file.
while i run index.html under public fiolder it run but search functionality missing what i do.
please help me..........
thanks,
Hi kuldeep,
You can download from here
i am not sure but chosen may be hv width property.
Sir Thanks for this.. it really helped.. I just need your support to make it respnosive.. I have applied it to AdminLTE and the form is fully responsive except the Drop-down.. So please help
U can use lte theme select as well
I'm using AdminLTE theme's select, but I'm using the CSS class provided by you, may be it is causing unresponsiveness.. I need you to please tell me how can I make it responsive. Thank you
remove my css and check, its responsive then add one by one css class and debug