A jQuery select dropdown – An editable input plug-in

The editable jQuery select dropdown

In the Bootstrap series of tutorials, I wrote about multi-select dropdown along with searchable option as using the Bootstrap framework.

In this tutorial, I am going to show you another plug-in related to HTML select but with editable options. This nice and simple  jQuery based plugin allows adding the new options on the fly.

That means, if an option does not exist in the dropdown list and user enters a new value, it will be added in the dropdown for future use. See the demos and setting up guide in the section below.

A demo of using and setting up jQuery-editable-select

Creating the editable select dropdown involves simply using the HTML select tag with options as we normally do. After including the CSS file of the plug-in, you simply need to add the class in the <select> tag. Create options as you want that are required for users to see initially:

jQuery select editable

See online demo and code

This is how the editable select is created:

First of all, the CSS file is included in the <head> section:

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

In the markup, the <select> tag is used with options and ui-select class is assigned as well:

 

Above the </body> section, the jQuery and plug-in’s JS files are included:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>

<script src=”js/jquery-editable-select.js”></script>

Finally, the plug-in is initiated in the <script> section:

 

In the code, you can see, there is no “Java” added in the <option> tags. However, the image is displaying it, because I added it by entering in the textbox of editable select.

A demo of disabling the input textbox

Although, you may not need it while using this plug-in, it has an option to disable the user input as well. For that, simply use the data attribute: data-editable=”false” in the <select> tag. In that case, the textbox for adding options would not be visible:

jQuery select

See online demo and code

Only this line of code is changed in the markup section:

 

Styling the editable select dropdown

You may change the CSS file of plug-in or override the properties dealing with the presentation of the editable dropdown.

In this demo, I am overriding the properties for changing a few CSS classes.

jQuery select edit style

See online demo and code

In the <style> section of demo page’s code part, you can see, two classes are overridden. The first class, ui-select-wrap .dropdown-box, is used to change the background color and border of the drop-down box. While ui-select-wrap ul li.over is used to change the hover color, as you bring the mouse over any option.

Similarly, you may change or add other simple CSS or CSS 3 properties in these or other classes as per the need of your web project.

 

Credit: Shaoyun