Press "Enter" to skip to content

A jQuery Input Picker Plugin That Supports Showing Multiple Columns

The jQuery UI plug-in for input picker is designed to be compatible with other official jQuery UI tools. Multiple column widths will combine well with your form. It is very easy to integrate the plugin into your form for your entries.

It supports both local data (data array) and removes data source (JSON) via AJAX requests.

Bootstrap Data Table With Checkbox, Sort, Pagination, Export, DetailView, and More

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

Official Website(ukalpa): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published.