User-Friendly Input Box Plugin For jQuery - Chosen

User-Friendly Input Box Plugin For jQuery - Chosen
File Size: 193 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Chosen is a javascript library that makes your input box much more User-Friendly. It is currently available in both jQuery and Prototype flavors.

See also:

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.