Multi-column Dropdown Selector Plugin For jQuery - Inputpicker

Inputpicker is a simple jQuery plugin that converts the normal text field into a filterable, multi-column dropdown select box for convenient option selection.

Supports both local data (data array) and remove data source (JSON) via AJAX requests.

How to use it:

1. Download and put the jQuery inputpicker plugin's files into the webpage which has 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 standard input field on the webpage.

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

3. Initialize the plugin to generate a basic dropdown select box.

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

4. Define your complex data in multiple columns.

$('#demo').inputpicker({
  data:[
    {value:"1",text:"jQuery", description: "This is the description of the text 1."},
    {value:"2",text:"Script", description: "This is the description of the text 2."},
    {value:"3",text:"Net", 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 external data source:

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

6. Enable the live search functionality on the inputpicker.

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

7. All default plugin options.

/**
 * 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 instance.

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

9. Available events.

// 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
})

Changelog:

2021-02-05

• Added change_highlight.inputpicker event

2020-09-01

• Turn off debug mode in normal use

2019-10-28

• Add custom style on fields paramater with object, it is used for create custom style of table column will added

2018-05-27

• Add disable/enable status

2018-05-07

• Fix Right Arrow wrong position

2018-04-24

• Add Headers for json request

2018-01-01

• Fix the bug that empty the selected option in the empty selectMode

2017-12-16

• Add the 'selectMode' option, remove the 'creatable' option

2017-12-12

• Add 'creatable' parameter

2017-12-11

• Add auto responsive

2017-12-08

• Add Highlight option

2017-12-05

• Trigger change when the content is empty and press tab

2017-11-28

• Add the pagination feature

2017-11-27

• Change the element() function to support selecting element by specific field

2017-10-27

• Add 'destroy' method

2017-09-15

• Add 'getting element object'

2017-07-28

• Fixed bugs.

2017-06-06

• Remove tabindex for 'x' in multiple options
• Add multiple values support

2017-05-23

• Add cache for loading remote url

2017-05-22

• Fix some bugs in events
• Add events

---

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