Easy Searchable Multi Select jQuery Plugin - MultiPick.js
File Size: | 10.4 KB |
---|---|
Views Total: | 877 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

MultiPick.js is an easy-to-use multi-select jQuery plugin that allows users to choose one or more items from a pre-defined list of options.
It works with the native <select>
element and is easy to style using your own CSS.
More Features:
- Allows you to specify the maximum number of options that can be selected.
- Allows you to assign an image for each option.
- Allows you to filter options by the search box.
- Displays selected options as tags/tokens.
How to use it:
1. Include the multipick.js plugin's files on the page.
<link rel="stylesheet" href="/path/to/multiPick.css" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/multiPick.js"></script>
2. Assign an image for each option using the data-img
attribute:
<select id="multiPick"> <option value="0" data-img="1.jpg">Option 0</option> <option value="1" data-img="2.jpg">Option 1</option> <option value="2" data-img="3.jpg">Option 2</option> ... </select>
3. Call the function multiPick
on the select
element and the plugin will take care of the rest:
$('#multiPick').multiPick({ // options here });
4. Available plugin options.
$('#multiPick').multiPick({ // max number of options limit: 2, // enable images image: false, // close the select after selection closeAfterSelect: true, // enable search field search: false, // placeholder text placeholder: 'Select', // slim layout slim: false, });
5. Get the selected options.
let values = $('#multiPick').getMultiPick();
This awesome jQuery plugin is developed by Kaynan13. For more Advanced Usages, please check the demo page or visit the official website.