jQuery Plugin For Custom Filterable Select Box - Editable Select

File Size: 18.6 KB
Views Total: 35980
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


4. Customizable options.


  // 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) {}



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


  • New trigger option and other enhancements


  • Improve event triggering


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


  • v2.0.0


  • Add data copy to 'copyAttributes' method


  • Append to the input parent by default


  • Add 'appendTo' property


  • 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.