Chosen is a replacement for browser dropdown lists.
You can find more info about its options here: http://harvesthq.github.io/chosen/
To use it, you should include:
components/chosen/chosen.css
components/chosen/chosen.jquery.js

A basic example could be like this:

 $('.chosen-select').chosen();

Add .tag-input-style class to select element for an alternative multiple chosen style:
```
 
```

Please note that if chosen element is inside a container which is hidden at first, it may not render properly.
To resolve it you should create the chosen or reset its width when the container is shown:

 //an example of a chosen inside a modal
 $('#modal-form').on('shown.bs.modal', function () {
   $('.chosen-select').chosen(); 
 })
 
 //or
 $('#modal-form').on('shown.bs.modal', function () {
    $(this).find('.chosen-container').each(function(){
       $(this).find('a:first-child').css('width' , '210px');
       $(this).find('.chosen-drop').css('width' , '210px');
       $(this).find('.chosen-search input').css('width' , '200px');
    });
 })

Chosen plugin is not responsive by default and to make it so, you should change its dimensions on window resize event:

$(window).on('resize.chosen', function() {
    //get its parent width
    var w = $('.chosen-select').parent().width();
    $('.chosen-select').siblings('.chosen-container').css({'width':w});
}).triggerHandler('resize.chosen');

Chosen does not support touch devices.
So you can ignore touch devices when initiating chosen on an element:
```
if(!ace.vars['touch']) {
  //only enable chosen if not a touch device!
  $('.chosen-select').chosen();
}
```

Select2 is similar to chosen with more advanced features such as remote data loading.
For more info please see https://github.com/ivaynberg/select2/
To use it you should include:
components/selec2/dist/css/select2.css
components/selec2/dist/js/select2.js
You can add .tag-input-style class to select element for an alternative multiple chosen style:
```
 
```

For more info about tag input plugin, please see its page at: https://github.com/fdeschenes/bootstrap-tag
To use it, you should include:
components/_mod/bootstrap-tag/bootstrap-tag.js
Its autocomplete feature is powered by Bootstrap's typeahead plugin.

A basic example which retrieve's autocomplete data dynamically from server is like this:

var tag_input = $('#form-field-tags');
try{
   tag_input.tag({
      placeholder: tag_input.attr('placeholder'),
      //source: ['tag 1', 'tag 2'],//static autocomplet array

      //or fetch data from database, fetch those that match "query"
      source: function(query, process) {
         $.ajax({url: 'remote_source.php?q='+encodeURIComponent(query)})
          .done(function(result_items){
             process(result_items);
         });
      }
   });
}
catch(e) {
   //display a textarea for old IE, because it doesn't support this plugin or another one I tried!
   tag_input.after('<textarea id="'+tag_input.attr('id')+'" name="'+tag_input.attr('name')+'" rows="3">'+tag_input.val()+'</textarea>').remove();
}

You can also add new tags using the following code:

//programmatically add a new tag
var $tag_obj = $('#form-field-tags').data('tag');
$tag_obj.add('new tag');

For more info and examples about dual listbox plugin, please see: http://www.virtuosoft.eu/code/bootstrap-duallistbox/
To use it, you should include:
components/bootstrap-duallistbox/dist/bootstrap-duallistbox.css
and
components/_mod/bootstrap-duallistbox/jquery.bootstrap-duallistbox.js

For more info and examples about multiselect plugin, please see: http://davidstutz.github.io/bootstrap-multiselect/
To use it, you should include:
components/bootstrap-multiselect/dist/css/bootstrap-multiselect.css
and
components/_mod/bootstrap-multiselect/bootstrap-multiselect.js

For more info and examples about masked input plugin, please see: http://digitalbush.com/projects/masked-input-plugin/
To use it, you should include:
components/jquery.maskedinput/dist/jquery.maskedinput.js

Input Limiter plugin, limit's textarea input size by displaying a message to user which shows remaining characters.
For more info please see: http://rustyjeans.com/jquery-plugins/input-limiter
To use it, you should include:
components/jquery-inputlimiter/jquery.inputlimiter.js

A basic example would be like this:

$('textarea.limited').inputlimiter({
   remText: '%n character%s remaining...',
   limitText: 'max allowed : %n.'
});

Textarea autosize, is used for automatically increasing textarea height as user input grows.
For more info please see its page at: http://www.jacklmoore.com/autosize/
To use it, you should include:
components/autosize/dist/autosize.js
A basic example would be something like this:
```
autosize($('textarea[class.autosize]'));
```

Form Inputs & Controls

Chosen

Select2

Tag Input

Dual Listbox

Bootstrap Multiselect

Masked Input

Input Limiter

Auto Size