Multifunctional Select Replacement Plugin For jQuery - Selectator

Selectator is a tiny jQuery plugin that helps you style and enhances the default select boxes with more advanced features as introduced below.

Features:

• Custom options images and badges.
• Fetches remote option data via AJAX.
• Live search.
• Supports both single and multiple selection.
• Callback functions.
• Easy to customize using your own styles.

How to use it:

1. Link to jQuery library and the jQuery Selectator plugin's files:

<link href="fm.selectator.jquery.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery.min.js"></script> 
<script src="fm.selectator.jquery.js"></script> 

2. Create a normal select box and specify the images, badges, and sub titles using the following data attributes.

• data-subtitle: subtile below the option
• data-left: left image
• data-right: right badge

<select id="basic" name="select">
  <option value="">&nbsp;</option>
  <option value="1" data-subtitle="The first option" data-left="1.png" data-right="1" selected>One</option>
  <option value="2" data-subtitle="The second option" data-left="2.png" data-right="2">Two</option>
  <option value="3" data-subtitle="The third option" data-left="3.png" data-right="3">Three</option>
  ...
</select>

3. Initialize the jQuery Selectator plugin with JavaScript.

$('#basic').selectator();

4. You can also initialize the plugin with inline markup as these.

<select multiple 
        class="selectator" 
        data-selectator-keep-open="true" 
        data-MORE-OPTION="OPTION VALUE">
  <option value="">&nbsp;</option>
  <option value="1" data-subtitle="The first option" data-left="1.png" data-right="1" selected>One</option>
  <option value="2" data-subtitle="The second option" data-left="2.png" data-right="2">Two</option>
  <option value="3" data-subtitle="The third option" data-left="3.png" data-right="3">Three</option>
  ...
</select>

5. All possible plugin options.

$('#basic').selectator({
  prefix: 'selectator_',
  height: 'auto',
  useDimmer: false,
  useSearch: true,
  showAllOptionsOnFocus: false,
  selectFirstOptionOnSearch: true,
  keepOpen: false,
  submitCallback: function () {},
  load: null, // Callback function when using remote data
  delay: 0,
  minSearchLength: 0,
  valueField: 'value',
  textField: 'text',
  searchFields: ['value', 'text'],
  placeholder: '',
  render: {
    selected_item: function (_item, escape) {
      var html = '';
      if (typeof _item.left !== 'undefined') 
        html += '<div class="' + self.options.prefix + 'selected_item_left"><img src="' + escape(_item.left) + '"></div>';
      if (typeof _item.right !== 'undefined') 
        html += '<div class="' + self.options.prefix + 'selected_item_right">' + escape(_item.right) + '</div>';
      html += '<div class="' + self.options.prefix + 'selected_item_title">' + ((typeof _item.text !== 'undefined') ? escape(_item.text) : '') + '</div>';
      if (typeof _item.subtitle !== 'undefined') 
        html += '<div class="' + self.options.prefix + 'selected_item_subtitle">' + escape(_item.subtitle) + '</div>';
      html += '<div class="' + self.options.prefix + 'selected_item_remove">X</div>';
      return html;
    },
    option: function (_item, escape) {
      var html = '';
      if (typeof _item.left !== 'undefined') 
        html += '<div class="' + self.options.prefix + 'option_left"><img src="' + escape(_item.left) + '"></div>';
      if (typeof _item.right !== 'undefined') 
        html += '<div class="' + self.options.prefix + 'option_right">' + escape(_item.right) + '</div>';
      html += '<div class="' + self.options.prefix + 'option_title">' + ((typeof _item.text !== 'undefined') ? escape(_item.text) : '') + '</div>';
      if (typeof _item.subtitle !== 'undefined') 
        html += '<div class="' + self.options.prefix + 'option_subtitle">' + escape(_item.subtitle) + '</div>';
      return html;
    }
  },
  labels: {
    search: 'Search...'
  }
});

6. API methods.

// remove selection
$('#basic').selectator('removeSelection');

// hide the dropdown
$('#basic').selectator('hideDropdown');

// refresh
$('#basic').selectator('refresh');

// destroy
$('#basic').selectator('destroy');

Changelog:

2020-10-18

• Added two new methods: removeSelection and hideDropdown.
• Prevent opening dropdown when removing selection

2020-04-10

• Fixed for iOS Safari

---

This awesome jQuery plugin is developed by QODIO. For more Advanced Usages, please check the demo page or visit the official website.