Anything Modal Picker Plugin For Bootstrap - Modal-Picker
File Size: | 47.2 KB |
---|---|
Views Total: | 2666 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.