Anything Modal Picker Plugin For Bootstrap - Modal-Picker

A dynamic, ajax-enabled jQuery modal picker plugin for Bootstrap that allows the users to select single or multiple items from a searchable picker modal interface.

How to use it:

1. Load the jQuery Modal-Picker plugin's script mi-picker.js in your Bootstrap project.

<link href="/path/to/bootstrap.min.css" rel="stylesheet">
<script src="/path/to/jquery.min.js"></script>    
<script src="/path/to/bootstrap.min.js"></script>
<script src="/path/to/mi-picker.js"></script>

2. Insert your own items to a JavaScript array as this:

var color = [
    { Text: "Black", Value: "1" }, 
    { Text: "Blue", Value: "2" }, 
    { Text: "Green", Value: "3" }, 
    { Text: "Red", Value: "4" }, 
    { Text: "Silver", Value: "5" }
    ...
];

3. Create an input field to accept the selected item(s).

<input id="txt-color" type="text" class="form-control" disabled="disabled" />

4. Initialize the plugin on the input field and done.

$('#txt-color').Picker({ 
  data: color 
});

5. Enable the multi select functionality:

$('#txt-color').Picker({ 
  data: color,
  multiSelect: true
});

6. You're also allowed to load external data sets into the modal picker via AJAX requests.

$('#txt-color').Picker({ 
  ajax: true, 
  url: 'file path'
});

7. More configuration options and callback functions with default values.

$('#txt-color').Picker({ 

  // modal id
  id: "MyModal",

  // picker title
  title: "Title Goes Here",

  // returns specific group when using server calls
  group: null,

  // custom button template
  buttonTemplate: null,

  // allows parent modal to scroll
  isSubModal: false,

  // shows blank
  showBlank: false

  // callback function
  onSelected: function () { }
  
});

Change log:

2017-09-21

• Option to display "disabled" items via CSS style

2017-08-23

• Set focus to search box upon opening modal

---

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