[Selectator] jQuery Based Replacement for Select Boxes

A selector is a jQuery-based alternative to checkboxes and supports search, custom renderers, remote data (ajax), search delay, minimum search length, and remove / clear selection and placeholders.

It directly affects the original selection box, which is used as a data container.

Features:

Custom photo and decal options.
Fetch remote option data via AJAX.
Live search.
Supports both single and multiple selections.
Callback functions.
Easy to customize with your own patterns.

How to make use of it:

1. Link to the jQuery library and the jQuery Selectator plugin’s information:

<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 standard select box and specify the photographs, badges, and subtitles utilizing the following data attributes.

<select id="basic" name="select">
  <option value=""> </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 may 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=""> </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 attainable plugin choices.

$('#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 strategies.

// remove selection
$('#basic').selectator('removeSelection');
// hide the dropdown
$('#basic').selectator('hideDropdown');
// refresh
$('#basic').selectator('refresh');
// destroy
$('#basic').selectator('destroy');

Multifunctional Select Replacement Plugin, Selectator Plugin/Github