A jQuery Input Picker Plugin That Supports Showing Multiple Columns

How to make use of it:

1. Download and put the jQuery input picker plugin’s information into the webpage which has the jQuery library loaded.

<link href="jquery.inputpicker.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.inputpicker.js"></script>

2. Create a normal input area on the webpage.

<input class="form-control" id="demo" value="jQuery">

3. Initialize the plugin to generate a primary dropdown choose field.

$('#demo').inputpicker({
  data:[ "", "", "" ]
});

4. Define your advanced data in a number of columns.

$('#demo').inputpicker({
  data:[
    {value:"1",text:"Text 1", description: "This is the description of the text 1."},
    {value:"2",text:"Text 2", description: "This is the description of the text 2."},
    {value:"3",text:"Text 3", description: "This is the description of the text 3."}
  ],
  fields:[
    {name:'value',text:'Id'},
    {name:'text',text:'Title'},
    {name:'description',text:'Description'}
  ],
  headShow: true,
  fieldText : 'text',
  fieldValue: 'value'
});

5. Load your dataset from an exterior data supply:

$('#demo').inputpicker({
  url: 'sample.json',
  fields:['id','name','hasc'],
  fieldText:'name',
  fieldValue:'id'
});

6. Enable the live search performance on the input picker.

$('#demo').inputpicker({
  url: 'sample.json',
  fields:['id','name','hasc'],
  fieldText:'name',
  fieldValue:'id',
  filterOpen: true
});

7. All default plugin choices.

/**
 * Width , default is 100%
 */
width: '100%',

/**
 * Default Height
 */
height: '200px',

/**
 * Selected automatically when focus
 */
autoOpen: false,

/**
 * Press tab to select automatically
 */
tabToSelect: false,

// Allow user creates new value when true,
creatable : false,    

/**
 * The action after pressing 'tab'
 * restore: Use the previous value, the change event is not raised.
 * active: Use the active option
 * new: Use the current keyword,
 * null : Set the word is null
 */
selectMode : 'restore',

/**
 * True - show head
 * False
 */
headShow : false,   // true : show head, false: hide


/**
 * Support multiple values
 */
multiple : false,

/**
 * Tag
 */
tag : false,

/**
 * Delimiter for multiple values
 */
delimiter: ',',

/**
 * Data
 */
data: [],

/**
 * Fields
 * Store fields need to been shown in the list
 * (Sting) - 'value'
 * (Object) - {name:'value', text:'Value'}
 */
fields: [],

/**
 * The field posting to the field
 */
fieldValue: 'value',

/**
 * The field shown in the input
 * Will use fieldValue if empty
 */
fieldText :'',


// filter Setting

/**
 * True - filter rows when changing the input content
 * False - do not do any spliation
 */
filterOpen: false,

/**
 * Choose the method of filtering
 * 'start' - start filtering from the beginning
 * others - all content matches
 */
filterType: '',  // 'start' - start from beginning or ''

/**
 * Choose the fields need to be filtered
 * (String)'name' - one field
 * (Array)['name', 'value'] - multiple fields
 */
filterField: '',

/**
 * Limit number
 */
limit: 0,

// --- URL settings --------------------------------------------
url: '',    // set url

urlCache: false,

/**
 * Set url params for the remote data
 */
urlParam: {},

/**
 * If search interval is too short, will execute
 */
urlDelay: 0,

/**
 * pagination
 */
pagination: false,   // false: no

pageMode: '',  // The Pagination mode: '' is the default style; 'scroll' is the scroll dragging style

pageField: 'p', // Page File Name for request

pageLimitField: 'limit', // Page Limit Field name for request

// pageLimit: 10,  // Page limit for request -- deprecated due to replication with the 'limit' field

pageCurrent: 1, // Current page

pageCountField: 'count',
pageCount:0,    // System uses


listBackgroundColor: '',
listBorderColor: '',
rowSelectedBackgroundColor: '',
rowSelectedFontColor : '',

// Un-necessary - Use Pagination
// pagination: false,


// All the result match keywords will highlight, only
highlightResult : false,


responsive: true,

_bottom: ''

8. Destroy the occasion.

$('#demo').inputpicker('destroy');

9. Available occasions.

// triggered after updating the input
$('#demo').change(function(input){
  // do something
});

// triggered after changing highlight option in the dropbox
$('#demo').on('change_highlight.inputpicker', function(input){
  // do something
})

Multi-column Dropdown Selector Plugin, jQuery UI Inputpicker Github

See Demo And Download