jQuery Plugin For Custom Editable Select Box - editable-select

A tiny jQuery plugin used to create a custom editable select box where you can add new select options in the input field.

How to use it:

1. Place the style sheet editable-select.css in the header to style the select box.

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

2. Place the JavaScript file editable-select.js after jQuery library but before the closing body tag.

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

3. Include the Font Awesome for caret icons.

<link rel="stylesheet" href="/path/to/font-awesome.min.css">

4. Call the function on the target select box and done.

$('select').editableSelect();

5. Default plugin options.

$('select').editableSelect({
  warpClass: 'ui-select-wrap',
  editable: true
});

Change log:

2016-04-28

• update jquery-editable-select.js

2016-04-25

• Added 'editable' option

 

---

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