
Chosen is a javascript library that makes your input box much more User-Friendly. It is currently available in both jQuery and Prototype flavors.
Installation:
# NPM $ npm install chosen
Basic Usage:
1. Include Chosen CSS to style your plugin.
<link rel="stylesheet" href="chosen/chosen.css" />
2. The minimal markup.
<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="Aland Islands">Aland Islands</option> <option value="Albania">Albania</option> <option value="Algeria">Algeria</option> ... </select>
3. Include the latest jQuery library and Chosen.js
<script src="jquery.min.js"></script> <script src="chosen/chosen.jquery.js" type="text/javascript"></script>
4. Call the plugin and we're done.
$(".chzn-select").chosen();
5. Possible options to customize the plugin.
$(".chzn-select").chosen({ allow_single_deselect: false, disable_search_threshold: 0, disable_search: false, enable_split_word_search: true, group_search: true, search_contains: false, single_backstroke_delete: true, max_selected_options: Infinity, inherit_select_classes: false, display_selected_options: true, display_disabled_options: true, include_group_label_in_selected: false, max_shown_results: Infinity, case_sensitive_search: false, hide_results_on_select: true, RTL: false, width: 100% });
Change Logs:
v1.8.7 (2018-06-15)
- update to latest version
v1.7.0 (2017-06-01)
- update to latest version
v1.6.2 (2016-10-04)
- update to latest version
v1.3.0 (2014-12-20)
- update to latest version
v1.2.0 (2014-09-23)
- update to latest version
v1.1.0 (2014-02-07)
- update to latest version
This awesome jQuery plugin is developed by harvesthq. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 15.06.2018
- Source