Hit enter after type your search item

A jQuery multi-select list view plug-in: with six options

The multi-select list view plug-in

In professional websites where you generally need to select multiple options from one list to the other are used for specific type of data.

For example, select your skills from the available list of HTML, JavaScript, jQuery, Bootstrap, CSS, etc.  This list is generally presented on the left side.

You keep on selecting by single or double clicking and the selected items will move to the right list, showing which items are selected.

By using a jQuery plug-in, you may create this list-view with multiple selection options quite easily. Still not clear? Have a look at the demos in the following section.

A demo of multi-select list-view

In this demo, a list-view with multiple selection option is created. See a demo online with the description and how to set up this plug-in below:

jQuery multi select

See online demo and code

You can see, the multi select list view has a few options as well, like redo and undo the actions. Select an item from the left options box and click on the arrow to add it to the right list. Similarly, you may double-click an item to move towards left or right.

For creating this in your web pages, first Bootstrap framework’s CSS file is included in the <head> section:

In the markup section, simply create an HTML dropdown with <select> tag:

 


 

Similarly, for right list view:

<select name=”to” id=”lstview_to” class=”form-control” size=”13″ multiple=”multiple”></select>

The button code is added in between these two <select> tags.

(See the complete code in the demo page)

Just above the </body> tag, place the jQuery library and plug-in’s JS file (multiselect.js). You may download it from the Github website here or view source the demo page. Locate multiselect.js and save it to your system.

As such, for the demo Bootstrap framework is used, its JS file is also included.

Finally, initiate the plugin in the <script> section:


 

The multi-select list view is ready with six options.

A demo with search option

By using the “search” option of plug-in in the <script> part and adjusting some code in the markup, you may create multi-select list view controls with search boxes at both side.

In that case, the search terms will be shortlisted in the multi-select dropdowns. For example, if you type “CS” in the above example, the left box will shortlist the options to CSS and CSS3. See a demo online by using different terms:

jQuery multi select search

See online demo and code

Only these changes are made than the first example to enable search option.

In the markup, the <select> tag’s names are used as follows:

<select name=”from[]” id=”lstview” class=”form-control” size=”8″ multiple=”multiple”>

That is the names with square brackets.

In the <script> part, the search option is used as follows:


 

That’s it!

A demo with option groups

You may also show options in groups. For example, categorizing HTML, CSS, JavaScript into the web category while Java, Python into High level languages etc. Similarly, giving options of cars for different brands in categorized way.

See the demo to check how it works:

jQuery multi select option group

See online demo and code

See the complete code in the demo page.

Adding some colors demo

As such, the demos are using the Bootstrap, you may use different buttons of Bootstraps and also use custom class for list view to give it some colors etc.

jQuery multi select style

See online demo and code

This is how the buttons are used with different Bootstrap classes:

The first button is given the btn-danger, second and fifth btn-primary, third and fourth btn-success while the  last button is assigned the btn-warning Bootstrap class. Both select tags are given a custom CSS class which is placed in the <style> tag under <head> section.

See the complete code in the demo page.

This div height required for enabling the sticky sidebar