Selectize

Selectize is the hybrid of a textbox and select box. It's a lot like Chosen, Select2, and Tags Input but with a few advantages.

GitHub Selectize

Basic example

<select id="selectize-basic" placeholder="Select a person..."> 
    <optgroup label="Geniuses">
        <option value="1">Carl Sagan</option>
        <option value="2">Albert Einstein</option>
        <option value="3">Nikola Tesla</option>
    </optgroup>
    <optgroup label="Almost geniuses">
        <option value="4">Lucas Estêvão</option>
        <option value="5">Fernando Mondo</option> 
        <option value="6">Thiago Roberto</option> 
        <option value="7">Tiago Fontella</option> 
    </optgroup>
</select>
$('#selectize-basic').selectize({
    create: true,
    sortField: {field: 'text'}
});

Dependencies

Tags

<input type="text" id="selectize-tags" value="awesome,neat">
$('#selectize-tags').selectize({
    persist: false,
    createOnBlur: true,
    create: true
});

<input type="text" id="selectize-tags-remove" value="chemistry,physics,biology">
$('#selectize-tags-remove').selectize({
    plugins: ['remove_button'],
    delimiter: ',',
    persist: false,
    create: function(input) {
        return {
            value: input,
            text: input
        }
    }
});

Icons

To use, add .selectize-icons.

<select placeholder="Pick some option..." id="selectize-icons" class="selectize-icons"></select>
$('#selectize-icons').selectize({
  valueField: 'value',
  optgroupField: 'class',
  searchField: ['value'],
  options: [
    {class:'Social', value: 'Instagram', icon: 'icon-brand-instagram'},
    {class:'Social', value: 'Twitter', icon: 'icon-brand-twitter'},
    {class:'Social', value: 'Facebook', icon: 'icon-brand-facebook'},
    {class:'Tech', value: 'Git', icon: 'icon-brand-git'},
    {class:'Tech', value: 'HTML5', icon: 'icon-html5'},
    {class:'Tech', value: 'Docker', icon: 'icon-brand-docker'}
  ],
  optgroups: [
    {value: 'Social', label: 'Social'},
    {value: 'Tech', label: 'Tech'},
  ],
  render: {
    item: function(item, escape) {
      return '<div><span class="icon ' + item.icon + '"></span>' + escape(item.value) + '</div>';
    },
    option: function(item, escape) {
      return '<div><span class="icon ' + item.icon + '"></span>' + escape(item.value) + '</div>';
    }
  }
});

Sizes

Add .selectize-lg, .selectize-sm for additional sizes.

<select class="selectize-lg"></select>

<select class="selectize-sm"></select>

States

To use, add .has-warning, .has-danger, or .has-success to the parent element.

<div class="form-group has-success">
  <select placeholder="Select a hero..." class="form-control-success">...</select>
  <div class="form-control-feedback">Success! You've done it.</div> 
</div>

<div class="form-group has-warning">
  <select placeholder="Select a hero..." class="form-control-warning">...</select>
  <div class="form-control-feedback">Shucks, check the formatting of that and try again.</div> 
</div>

<div class="form-group has-danger">
  <select placeholder="Select a hero..." class="form-control-danger">...</select>
  <div class="form-control-feedback">Sorry, that username's taken. Try another?</div> 
</div>