# Form Inputs & Controls

### Chosen

- 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:
  `assets/css/chosen.css`
  `assets/js/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

- 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:
  `assets/css/select2.css`
  `assets/js/select2.js`
- You can add `.tag-input-style` class to `select` element for an alternative multiple chosen style:

### Tag Input

- For more info about tag input plugin, please see its page at: https://github.com/fdeschenes/bootstrap-tag
- To use it, you should include:
  `assets/js/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');

### Dual Listbox

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

### Bootstrap Multiselect

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

### Masked Input

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

### Input Limiter

- 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:
  `assets/js/jquery.inputlimiter.1.3.1.js`
- A basic example would be like this:

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

### Auto Size

- 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:
  `assets/js/jquery.autosize.js`
- A basic example would be something like this:

      $('textarea.autosize').autosize({append: "\n"});