Multi-column Dropdown Selector Plugin For jQuery - Inputpicker

Multi-column Dropdown Selector Plugin For jQuery - Inputpicker
File Size: 37.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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-3.2.1.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: ''

Changelog:

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.