Dual List Box Plugin jQuery Multi - Free Download Searchable Dual List Box Plugin With jQuery - multi.js

Free Download Searchable Dual List Box Plugin With jQuery – multi.js

Posted on

This time I will share jQuery Plugin and tutorial about Searchable Dual List Box Plugin With jQuery – multi.js, hope it will help you in programming stack.

Dual List Box Plugin jQuery Multi - Free Download Searchable Dual List Box Plugin With jQuery - multi.js
File Size: 50.3 KB
Views Total: 8687
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

This is a tutorial about how to implement the multi.js dual list box library as a jQuery plugin. The multi.js is a lightweight JavaScript library that transforms the normal multiple select list into a searchable dual list box interface for easier option selection.

How to use it:

1. Load the minified version of the jQuery multi.js plugin’s stylesheet in the document’s head section.

1 <link rel="stylesheet" href="dist/multi.min.css">

2. Load the minified version of the jQuery multi.js plugin’s JavaScript after jQuery library.

2         integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
3         crossorigin="anonymous">
4 </script>
5 <script src="dist/multi.min.js"></script>

3. Call the function multi on your existing multiple select list.

01 <select multiple="multiple" name="Programming-Languages" id="example">
02   <option selected="selected" disabled="disabled">Disabled</option>
03   <option>Python</option>
04   <option>C</option>
05   <option>Java</option>
06   <option>C++</option>
07   <option>C#</option>
08   <option>R</option>
09   <option>GO</option>
10   <option>JavaScript</option>
11   <option>PHP</option>
12   <option>Ruby</option>
13   <option>Swift</option>
14 </select>
1 $( '#example' ).multi();

4. Customize the headers of the select boxes.

1 $( '#example' ).multi({
2   non_selected_header: 'Languages',
3   selected_header: 'Selected Languages'
4 });

5. Enabled/disable the live search functionality.

1 $( '#example' ).multi({
2  
3   // enable search
4   enable_search: true,
5   
6   // placeholder of search input
7   search_placeholder: 'Search...'
8  
9 });

Changelog:

2019-12-26

  • Avoid XSS when rendering choices

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

source : jquery.net