[Live Search] Minimal and Dynamic Multiple Select Replacement

jquery multi-select is a dynamic multiselect alternative that allows you to select one or more options from a dropdown list and convert the selected options into removable tags.

A built-in live search function lets you quickly filter options by value, and any behaviors such as autocomplete.

How to make use of it:

1. Add the JavaScript jquery-multi-select.js and stylesheet jquery-multi-select.css to the web page.

<link rel="stylesheet" href="/path/to/jquery-multi-select.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery-multi-select.js"></script>

2. Define the information that will probably be used as choices for the number of choices.

const myData = [
      {text: 'jquery', value: 1},
      {text: 'java', value: 4},
      {text: 'html', value: 3},
      {text: 'css', value: 2},
      {text: 'ruby', value: 6},
      {text: 'typeScript', value: 12},
      {text: 'react', value: 5},
      {text: 'vue', value: 8},
      {text: 'angular', value: 7},
      {text: 'golang', value: 10},
      {text: 'python', value: 16},
      {text: 'php', order: 15}
],

3. Call the function to generate a primary number chosen within the container you specify.

<div class="example"></div>
$('.example').multiSelect({
  data: myData
});

4. Trigger a function every time you add or take away a choice (tag).

$('.example').multiSelect({
  data: myData,
  listen(tags, item, operate){
    console.log(tags, item, operate);
  },
});

5. The plugin additionally offers a function to match two values:

$('.example').multiSelect({
  data: myData,
  compare(item1, item2){
    if(item1.text.length > item2.text.length){
      return true;
    } else {
      return false;
    }
  }
});

Minimal Multiple Select Replacement, jquery multi select Plugin/Github, select box with search option


See Demo And Download

Official Website(liushiliang): Click Here

This superior jQuery/javascript plugin is developed by liushiliang. For extra Advanced Usage, please go to the official website.

Share