This time I will share jQuery Plugin and tutorial about Multi-column Dropdown Selector Plugin For jQuery – Inputpicker, hope it will help you in programming stack.
| File Size: | 25.9 KB |
|---|---|
| Views Total: | 31165 |
| 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.
1 |
<link href="jquery.inputpicker.css" rel="stylesheet"> |
2 |
<script src="//code.jquery.com/jquery.min.js"></script> |
3 |
<script src="jquery.inputpicker.js"></script> |
2. Create a standard input field on the webpage.
1 |
<input class="form-control" id="demo" value="jQuery"> |
3. Initialize the plugin to generate a basic dropdown select box.
1 |
$('#demo').inputpicker({ |
2 |
data:[ "jQuery", "Script", "Net" ] |
3 |
}); |
4. Define your complex data in multiple columns.
01 |
$('#demo').inputpicker({ |
02 |
data:[ |
03 |
{value:"1",text:"jQuery", description: "This is the description of the text 1."}, |
04 |
{value:"2",text:"Script", description: "This is the description of the text 2."}, |
05 |
{value:"3",text:"Net", description: "This is the description of the text 3."} |
06 |
], |
07 |
fields:[ |
08 |
{name:'value',text:'Id'}, |
09 |
{name:'text',text:'Title'}, |
10 |
{name:'description',text:'Description'} |
11 |
], |
12 |
headShow: true, |
13 |
fieldText : 'text', |
14 |
fieldValue: 'value' |
15 |
}); |
5. Load your dataset from an external data source:
1 |
$('#demo').inputpicker({ |
2 |
url: 'sample.json', |
3 |
fields:['id','name','hasc'], |
4 |
fieldText:'name', |
5 |
fieldValue:'id' |
6 |
}); |
6. Enable the live search functionality on the inputpicker.
1 |
$('#demo').inputpicker({ |
2 |
url: 'sample.json', |
3 |
fields:['id','name','hasc'], |
4 |
fieldText:'name', |
5 |
fieldValue:'id', |
6 |
filterOpen: true |
7 |
}); |
7. All default plugin options.
001 |
/** |
002 |
* Width , default is 100% |
003 |
*/ |
004 |
width: '100%', |
005 |
006 |
/** |
007 |
* Default Height |
008 |
*/ |
009 |
height: '200px', |
010 |
011 |
/** |
012 |
* Selected automatically when focus |
013 |
*/ |
014 |
autoOpen: false, |
015 |
016 |
/** |
017 |
* Press tab to select automatically |
018 |
*/ |
019 |
tabToSelect: false, |
020 |
021 |
// Allow user creates new value when true, |
022 |
creatable : false, |
023 |
024 |
/** |
025 |
* The action after pressing 'tab' |
026 |
* restore: Use the previous value, the change event is not raised. |
027 |
* active: Use the active option |
028 |
* new: Use the current keyword, |
029 |
* null : Set the word is null |
030 |
*/ |
031 |
selectMode : 'restore', |
032 |
033 |
/** |
034 |
* True - show head |
035 |
* False |
036 |
*/ |
037 |
headShow : false, // true : show head, false: hide |
038 |
039 |
040 |
/** |
041 |
* Support multiple values |
042 |
*/ |
043 |
multiple : false, |
044 |
045 |
/** |
046 |
* Tag |
047 |
*/ |
048 |
tag : false, |
049 |
050 |
/** |
051 |
* Delimiter for multiple values |
052 |
*/ |
053 |
delimiter: ',', |
054 |
055 |
/** |
056 |
* Data |
057 |
*/ |
058 |
data: [], |
059 |
060 |
/** |
061 |
* Fields |
062 |
* Store fields need to been shown in the list |
063 |
* (Sting) - 'value' |
064 |
* (Object) - {name:'value', text:'Value'} |
065 |
*/ |
066 |
fields: [], |
067 |
068 |
/** |
069 |
* The field posting to the field |
070 |
*/ |
071 |
fieldValue: 'value', |
072 |
073 |
/** |
074 |
* The field shown in the input |
075 |
* Will use fieldValue if empty |
076 |
*/ |
077 |
fieldText :'', |
078 |
079 |
080 |
// filter Setting |
