Basic Picker
Populate picker from Javascript Object.
var color = [{ Text: "Black", Value: "1" }, { Text: "Blue", Value: "2" }, { Text: "Green", Value: "3" }, { Text: "Red", Value: "4" }, { Text: "Silver", Value: "5" }];
Multi-Select Picker
AJAX Picker
Server MVC code example:
[HttpGet]
public string Get(string group)
{
System.Collections.Generic.List<SelectListItem> model = new System.Collections.Generic.List<SelectListItem>();
    for (int p = 1; p < 36; p++) {
    model.Add(new SelectListItem() { Value = p.ToString(), Text = "Product " + p.ToString(), Group = new SelectListGroup() { Name = "Group 1", Disabled = false }, Disabled = false, Selected = false});
}
var json = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(model.OrderBy(x => x.Text).ToList());
return json;
}
How It Works
 During the Picker plugin creation, the <div> wrapper is appended to <body> tag at the bottom of page. This allow quick loading through-out the entire web application.
    When using ajax parameter, the ajax is only called once to create the picker modal. If user clicked again, plugin checks to see if the modal Id already exist. If TRUE, simply display the modal.
    Selected text and value are copied to the <input> element. Text will display in the field while also adding the data-name="text" and data-id="value" to that element.
    When using a <div> element, buttons are created to allow user to select more than one item from the list.
Plug-in Options
Modal Picker accepts a few options to better customize the picker modal.

 

id (optional) MyModal overrides the default parent Id of the modal div.
title (optional) Title Goes Here overrides the default modal title.
group (optional) NULL returns specific group when using server calls, see ajax. Also, append group name to css class for additional jquery functionally.
buttonTemplate (optional) NULL If not set, will use Bootstrap 'gyphicon-unchecked' for the button image. NOTE: text is place inside of a button tag.
    buttonTemplate: 'pickMe' 
    Or do a FontAwesome icon like this: 
    buttonTemplate:'<i class="fa fa-circle"></i>'
    
data (optional) NULL provide a custom set of data to fill the picker values. This data model is based from Microsoft MVC SelectListItem class. Javascript Object = [{Text: "Sample test 1", Value: "1", Group: {Name: "Group-1"} }]
ajax (optional) false when true, will make a ajax call to server with return Json result to fill the picker values.
url (optional) NULL required when ajax set to true. URL of server controller to fetch Json data model.
multiSelect (optional) false Turns picker into a multi-select mode to prevent opening and closing a modal window. Great when using DIV elements!
isSubModal (optional) false When using the picker from another modal window, set this to true to allow parent modal to scroll (when needed).
callback (optional) function() provide additional jquery functionally once the selection has been made.