Searchable Dual List Box Plugin With jQuery - multi.js

Searchable Dual List Box Plugin With jQuery - multi.js
File Size: 10.6 KB
Views Total:
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...'

});

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