jQuery Plugin For Custom Filterable Select Box - Editable Select

jQuery Plugin For Custom Filterable Select Box - Editable Select
File Size: 18.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

Change logs:

v2.2.5 (2017-05-07)

  • Removed jQuery<3 dependency (only JQ>1.1.1)

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.