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.

Basic usage:

1. Include the compiled CSS file in the head section of your html page.

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

2. Include jQuery library and the jQuery editable select plugin's JS file at the bottom of the page.

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.editable-select.js"></script>

3. Call the function on an existing select element and we're ready to go.

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

4. Customizable options.

$('#SELECTOR').editableSelect({

  // enable filter
  filter: true,

  // default, fade or slide
  effects: 'default',

  // fast, slow or [0-9]+
  duration: 'fast',

  // Where to append the dropdown list.
  appendTo: 'body',

  // "focus" or "manual"
  trigger: 'focus',

  // callback events
  onCreate: function () {},
  onShow: function () {},
  onHide: function () {},
  onSelect: function (element) {}
  
});

Changelog:

2023-04-14

• Updated

v2.2.5 (2017-05-07)

• Fixed created.editable-select event not working

v2.2.4 (2016-11-18)

• Fix dropdown close in no-filter mode

v2.2.0 (2016-11-10)

• Avoid selection of disabled options

2016-10-14

• New trigger option and other enhancements

2016-08-21

• Improve event triggering

2016-08-19

• v2.0.1:  Add `.remove()` method

2016-08-17

• v2.0.0

2016-06-28

• Add data copy to 'copyAttributes' method

2016-06-23

• Append to the input parent by default

2016-06-17

• Add 'appendTo' property

2016-04-13

• Added option 'value' (as data) to each <li> element

 

---

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