Searchable Dual List Box Plugin With jQuery - multi.js
File Size: | 50.3 KB |
---|---|
Views Total: | 11890 |
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.
<link rel="stylesheet" href="dist/multi.min.css">
2. Load the minified version of the jQuery multi.js plugin's JavaScript after jQuery library.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"> </script> <script src="dist/multi.min.js"></script>
3. Call the function multi
on your existing multiple select list.
<select multiple="multiple" name="Programming-Languages" id="example"> <option selected="selected" disabled="disabled">Disabled</option> <option>Python</option> <option>C</option> <option>Java</option> <option>C++</option> <option>C#</option> <option>R</option> <option>GO</option> <option>JavaScript</option> <option>PHP</option> <option>Ruby</option> <option>Swift</option> </select>
$( '#example' ).multi();
4. Customize the headers of the select boxes.
$( '#example' ).multi({ non_selected_header: 'Languages', selected_header: 'Selected Languages' });
5. Enabled/disable the live search functionality.
$( '#example' ).multi({ // enable search enable_search: true, // placeholder of search input search_placeholder: 'Search...' });
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.