Custom Filterable Input Select Box In jQuery – Editable Select

A Free jQuery Plugins with Create custom, filterable select boxes that can be edited. It is a lightweight and easy-to-use solution for enhancing the user experience of select boxes on your website or web application. With this plugin, users can easily search for and select options, as well as add their own custom options. Its customizable options allow for a seamless integration into your existing design.

How to use :

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

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

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>

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

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

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

Done