jQuery Plugin For Custom Filterable Select Box - Editable Select

Editable Select is a minimal jQuery select enhancement plugin for converting a regular select box into an autocomplete input field that displays select options in an animated, filterable, and rich-text suggestion dropdown list based on user input.

When users need to browse a hierarchy instead of filtering a flat option list, add this jQuery combo tree select component.

Features:

• Real-time filtering across the original select options.
• Editable text input for existing choices and custom text.
• Keyboard control with Arrow Up, Arrow Down, Enter, Tab, and Escape.
• Default, fade, and slide dropdown effects.
• Programmatic show, hide, filter, select, insert, remove, clear, and destroy controls.
• Namespaced jQuery events for creation, visibility changes, and selection.
• Disabled options cannot be selected.
• The native select stays available when JavaScript does not run.

How To Use It:

Install And Include The Files

Install the package with npm:

npm install jquery-editable-select

For a browser setup, load the stylesheet, jQuery, and the plugin script as follows:

<link rel="stylesheet" href="/path/to/jquery-editable-select.min.css">

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-editable-select.min.js"></script>

Basic Usage

The plugin replaces the select with a text input, copies the select attributes and data to that input, and builds the suggestion list from the original options.

<label for="vehicle">Vehicle</label>
<select id="vehicle" name="vehicle">
  <option value="alfa">Alfa Romeo</option>
  <option value="audi">Audi</option>
  <option value="bmw">BMW</option>
  <option value="citroen">Citroen</option>
</select>

$('#vehicle').editableSelect();

All Plugin Options

Option	Description
filter	Boolean. Default: true. Filters visible items as text changes.
effects	String. Default: default. Accepts default, fade, or slide.
duration	Number or String. Default: fast. Accepts a millisecond value, fast, or slow.
appendTo	String or jQuery element. Sets the element that receives the generated dropdown. The input parent is used when this option is omitted.
trigger	String. Default: focus. Accepts focus or manual.

$('#vehicle').editableSelect({
  filter: true,
  effects: 'fade',
  duration: 200,
  appendTo: 'body',
  trigger: 'focus'
});

Configure With Data Attributes

Option names can also come from data-* attributes on the select element.

<select
  id="country"
  data-filter="true"
  data-effects="slide"
  data-duration="200"
  data-trigger="focus">
  <option>Canada</option>
  <option>Japan</option>
  <option>Mexico</option>
</select>

$('#country').editableSelect();

Change Global Defaults

$.fn.editableSelect.Constructor.DEFAULTS.effects = 'slide';
$.fn.editableSelect.Constructor.DEFAULTS.duration = 200;

API Methods

Method	Description
show	Shows the dropdown list.
hide	Hides the dropdown list.
filter	Runs the filter against the current input text.
select	Selects a generated list item passed as a jQuery object.
add	Inserts a new item. Parameters: text, optional index, optional attributes, optional data.
remove	Removes the item at the supplied zero-based index.
clear	Removes every item from the dropdown and backing select.
destroy	Removes the generated input and dropdown and restores the original select.

Change Options After Initialization

$('#product').editableSelect();

// Insert an option at index 0.
$('#product').editableSelect(
  'add',
  'Mechanical Keyboard',
  0,
  [{ name: 'value', value: 'keyboard' }],
  { category: 'accessories' }
);

// Remove the third option.
$('#product').editableSelect('remove', 2);

// Remove every option.
$('#product').editableSelect('clear');

Open And Close The Dropdown Manually

$('#city').editableSelect({
  trigger: 'manual'
});

$('#openCityList').on('click', function () {
  $('#city').editableSelect('show');
});

$('#closeCityList').on('click', function () {
  $('#city').editableSelect('hide');
});

Events

Event	Fires When
created.editable-select	Initialization finishes.
show.editable-select	The dropdown starts opening.
shown.editable-select	The dropdown finishes opening.
hide.editable-select	The dropdown starts closing.
hidden.editable-select	The dropdown finishes closing.
select.editable-select	A visible, enabled item is selected.

Listen For A Selected Item

Bind plugin events before initialization. The selection handler receives the generated list item as an extra argument.

$('#vehicle')
  .on('select.editable-select', function (event, $item) {
    var optionValue = $item.attr('value');
    var optionText = $item.text();

    console.log(optionValue, optionText);
  })
  .editableSelect();

Keyboard Controls

• Arrow Up and Arrow Down: Move the highlighted item through the visible list.
• Enter: Selects the highlighted item when the dropdown is open.
• Tab: Hides the dropdown and continues normal keyboard navigation.
• Escape: Hides the dropdown.

HTML Option Labels

The generated list renders option text as HTML. Encode markup inside each <option> when you want richer labels in the suggestion list.

<select id="framework">
  <option>jQuery - &lt;small&gt;DOM library&lt;/small&gt;</option>
  <option>React - &lt;small&gt;UI library&lt;/small&gt;</option>
</select>

If option text comes from user input or remote data, sanitize it before initialization.

Important Value Behavior

Current master writes the selected item's text into the generated input. Applications that need the original <option value> can read the selected list item's value attribute from select.editable-select and store that value in another form field.

<input type="hidden" id="vehicleId" name="vehicle_id">

$('#vehicle')
  .on('select.editable-select', function (event, $item) {
    $('#vehicleId').val($item.attr('value') || '');
  })
  .editableSelect();

Alternatives And Related Resources

• Select2: Searchable Select Box Plugin for jQuery
• Bootstrap Select: Searchable Select Picker for Bootstrap 5
• jQuery Combo Tree Select Component
• Customizable Select Box & Input Field Enhancement Library - Choices.js

FAQs:

Q: Why do onCreate, onShow, onHide, or onSelect not work as options?
A: Current master uses namespaced jQuery events for those lifecycle points. Bind created.editable-select, shown.editable-select, hidden.editable-select, or select.editable-select before initialization.

Q: How do I get the original option value after selection?
A: Listen for select.editable-select. The selected list item carries the copied value attribute from the original option.

Q: Can I control the dropdown from my own buttons or events?
A: Yes. Set trigger: 'manual', then call show and hide through .editableSelect().

Q: How do I restore the original select element?
A: Call $('#selector').editableSelect('destroy'). The plugin removes its input and list and restores the original select.

Changelog:

2023-04-14

• Updated.

v2.2.5 (2017-05-07)

• Fixed the created.editable-select event.

v2.2.4 (2016-11-18)

• Fixed dropdown closing in no-filter mode.

v2.2.0 (2016-11-10)

• Disabled options can no longer be selected.

2016-10-14

• Introduced the trigger option and related changes.

2016-08-21

• Updated event triggering.

2016-08-19

• v2.0.1: Introduced the remove method.

2016-08-17

• v2.0.0.

2016-06-28

• Copied data attributes through the attribute-copy routine.

2016-06-23

• Changed the default dropdown container to the input parent.

2016-06-17

• Introduced the appendTo option.

2016-04-13

• Copied the option value attribute to each generated list item.

---

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