Easy Searchable Multi Select jQuery Plugin - MultiPick.js

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.