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.
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" > |
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 > |
10 |
< option >JavaScript</ option > |
13 |
< option >Swift</ option > |
1 |
$( '#example' ).multi(); |
4. Customize the headers of the select boxes.
1 |
$( '#example' ).multi({ |
2 |
non_selected_header: 'Languages' , |
3 |
selected_header: 'Selected Languages' |
5. Enabled/disable the live search functionality.
1 |
$( '#example' ).multi({ |
7 |
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.