Initiate a basic input with multiple options

Basic

Name	Format	Description	Example
width	String	Set width for the list	"100%" - equal with input "200px" - 200px
height	String	Set height for the list	"200px" - 200px
autoOpen	Bool	The list would / would not open when the input is focused	true - Open automatically false - Not open
headShow	Bool	Set whether showing the list head	true - show head false - hide head
fields	Array	Set fields for the list	"{String}" - ["value", "text", "country"] "{Object}" - [{"name":"value", "text":"Code"}, {"name":"text", "text":"Area"}, {"name":"country", "text":"Country"}]
fieldValue	String	Set the field which would be passed to the input value	"value" - the attribute "value" will be passed to the value.
fieldText	String	Set the field which would be shown on the screen	"text" - the attribute "text" will be shown on the screen.
highlightResult	Bool	Highlight for the options including the keyword	true - Open Highlight mode false(default) - Close Highlight mode
responsive	Bool	Responsive support	true(default) - If the "width" option is a percentage, the input width would be changed with resizing the window. false - Not responsive
creatable(deprecated) Please use the following "selectMode:'creatable'" option to replace this option	Bool	Support inputing value manually	true - Press tab or enter or lose focus will use the current keyword as value. false(default) - Press tab or enter or lose focus will use the old value
selectMode	String	The input value depends on keyword and the selectMode	'restore'(default): Use the previous value, the change event is not raised 'active': Use the active row in the dropdown as the value 'creatable': Use the keyword as value 'empty': Use the empty value as value

Data

Name	Format	Description	Example
data	Array	Set data for the list	["a", "b", "c"] [{"value":"AKL", "text":"Auckland", "country":"NZ"}, {"value":"WLG", "text":"Wellington", "country":"NZ"}]
element	var	Get the element object	$('#test').inputpicker('element') $('#test').inputpicker('element', 'AKL') $('#test').inputpicker('element', 'AKL', 'text') Select the element which the 'text' field is 'AKL' Return: - Found: {"value":"AKL", "text":"Auckland", "country":"NZ"} - Not Found: null
data_highlighted	var	Get the highlighted element object	$('#test').inputpicker('data_highlighted'); Return: - Found: {"value":"AKL", "text":"Auckland", "country":"NZ"} - Not Found: undefined
value_highlighted	var	Get the highlighted element value	$('#test').inputpicker('value_highlighted') Return: - Found: "AKL" - Not Found: undefined

Remote Url

Name	Format	Description	Example
url	String	Set remote data source for the list	"../src/example-regions.json"
urlParam	Object	Set specific parameters of url for reading remote data	{"category_id":1, "country", "NZ"}
urlHeaders	Object	Set specific headers for reading remote data	{"X-TOKEN":"This is a test token.", "X-User", "Admin"}
urlDelay	Int	Set seconds of delaying to read remote data	3 - start getting remote data after having completed to input keywords 3 seconds later

Pagination

Name	Format	Description	Example
pagination	Bool	Set "true" to open the pagination feature	The default value is "false"
pageMode	String	Unuse, will use it later
pageField	String	Set the field name posting the request url to the server	The default value is "p", Exp:"&p=1"
pageCurrent	Int	Set the current page	The default value is "1", Exp:"&p=1"
pageLimitField	String	Set the limit field name posting the request url to the server	The default value is "per_page", Exp:"&per_page=10"
limit	Int	Set the default limit number per page getting from the server	The default value is "10"
Return JSON: {"msg":"","count":75,"data":[{"id":2,"region_id":1,"name":"Auckland","hasc":"AL","region_name":"Auckland"},...]} msg: "" // Return error msg count: 75 // The total amount of items data: // The items of current page

Filter

Name	Format	Description	Example
filterOpen	Bool	Set whether filter list when inputting the content	true - the list will be filtered by inputting. false - the list will not be filtered.
filterType	String	Set the filter type when filterOpen is true	"start" - match contents from the beginning. "{any others}" - match contents from the whole content.
filterField	String / Array	Set the filter type when filterOpen is true	"" - match in all fields. "value" - match the field "value". ["value", "text"] - match the field "value" and "text".

Multiple Values

Name	Format	Description	Example
multiple	Bool	Set whether supporting multiple values	true - support multiple values. false - do not support.
delimiter	String	Set the delimiter when "multiple" is true	the default value is comma ","

Destroy

Name	Format	Description	Example
destroy	-	Restore the input to original if you do not want	$('#test').inputpicker('destroy');

The list of Events handlers

Basic

Name	Description	Example
focus(e)	Focus on the input	$('#test').focus()
change(e)	Activate after updating of the input	$('#test').change(function(input){ //... })
change_highlight.inputpicker(e)	Activate after changing highlight option in the dropbox	$('#test').on('change_highlight.inputpicker', function(input){ //... })

Structure

When using the Inputpicker plugin, it clones the original object to a new object

Original code

<input name="original" type="text" />

After Loaded

<input name="original" type="hidden" class="inputpicker-original inputpicker-original-5" data-inputpicker-uuid="5" />
<div id="inputpicker-div-5" class="inputpicker-div">
<input id="inputpicker-5" name="inputpicker-5" class="inputpicker-input" data-inputpicker-uuid="5" data-inputpicker-settings="{json}" data-inputpicker-data={json} />
<span class="inputpicker-arrow" data-inputpicker-uuid="5"><b></b></span>
</div>

<div id="inputpicker-wrapped-list" style="position:absolute;" data-inputpicker-uuid="5">
<table class="table">
<thead>
<tr><th></th></tr>
</thead>
<tbody>
<tr class="inputpicker-wrapped-element inputpicker-wrapped-element-{i}" data-i="0">...</tr>
<tr class="inputpicker-wrapped-element selected" data-i="1">...</tr>
</tbody>
</table>
</div>

You can customise style by your requirements

Style

/**
 * jQuery-inputpicker - A jQuery input picker plugin. It supports showing multiple columns select in input.
 * Copyright (c) 2017 Ukalpa@gmail.com - https://ukalpa.com/inputpicker
 * License: MIT
 */

.inputpicker-div {
    position: relative;
    /*display: inline-block;*/
    overflow: hidden;
    height: 100%;
}

.inputpicker-arrow {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px;
    height: 20px;
    cursor:pointer;
}

.inputpicker-arrow b {
    border-color:#888 transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0;
    height: 0;
    left: 50%;
    top: 50%;
    margin-left: -4px;
    margin-top: -2px;
    position: absolute;
    width: 0;
    font-weight: 700;
}

.inputpicker-wrapped-list {
    margin:0;
    background-color:#ffffff;
    z-index: 10000;
}

.inputpicker-wrapped-list {
    overflow-y: auto;
}

.inputpicker-wrapped-list .table {
    margin-bottom: 0px;
    border:1px solid #cccccc;
}

.inputpicker-wrapped-list .table>tbody>tr>td, .inputpicker-wrapped-list .table>tbody>tr>th, .inputpicker-wrapped-list .table>tfoot>tr>td, .inputpicker-wrapped-list .table>tfoot>tr>th, .inputpicker-wrapped-list .table>thead>tr>td, .inputpicker-wrapped-list .table>thead>tr>th {
    padding: 5px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}

.inputpicker-wrapped-list .inputpicker-selected{
    background-color: #d9edf7;
}

.inputpicker-wrapped-list .inputpicker-active{
    background-color: #248cb5 !important;
}

.inputpicker-wrapped-list .inputpicker-highlight-active{
    background-color: #bddef9
}

/*.loading*/

.inputpicker-div input{
    display: inline-block;
}


.inputpicker-div input.loading {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJzdmctc3Bpbm5lciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA4MCA4MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggaWQ9InNwaW5uZXIiIGZpbGw9IiM2NjY2NjYiIGQ9Ik00MCw3MkMyMi40LDcyLDgsNTcuNiw4LDQwQzgsMjIuNCwyMi40LDgsNDAsOGMxNy42LDAsMzIsMTQuNCwzMiwzMmMwLDEuMS0wLjksMi0yLDJzLTItMC45LTItMmMwLTE1LjQtMTIuNi0yOC0yOC0yOFMxMiwyNC42LDEyLDQwczEyLjYsMjgsMjgsMjhjMS4xLDAsMiwwLjksMiwyUzQxLjEsNzIsNDAsNzJ6Ij48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVUeXBlPSJ4bWwiIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiBmcm9tPSIwIDQwIDQwIiB0bz0iMzYwIDQwIDQwIiBkdXI9IjAuOHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPjwvcGF0aD48L3N2Zz4=');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-origin: content-box;
    background-position:right 5px center;
}

.inputpicker-div input.loading-msie-patch {
    background-image: url("./res/spinner.gif");
}

.inputpicker-multiple-selected{
    display: inline-block;
    float:left;
}
/* multiple ul */
.inputpicker-multiple-selected ul {
    display: inline-block;
    padding:4px;
    margin:0px;
}


.inputpicker-multiple-selected ul > li {
    list-style-type:none;
    display: inline-block;
    margin-right:5px;
    border:1px solid #888888;
    padding:1px;
    cursor:pointer;
}

.inputpicker-multiple input, .input-span {
    padding:0;
    margin:0;
    border:0 none;
    font-family:Sans-serif;
    white-space:pre;
    max-width: 100%;
    max-height: none;
    min-height: 0;
    text-indent:0;
    background:transparent;
    box-shadow: none;
    outline:0;
}


.inputpicker-multiple {
    display: inline-block;
    float: left;
}




.inputpicker-multiple ul {
    margin:0;
    padding:0;
}

.inputpicker-multiple ul > li {
    list-style-type:none;
    display: inline-block;
    /*margin-right:5px;*/
    cursor:pointer;

}

.inputpicker-multiple ul > li.inputpicker-element {
    /*border:1px solid #888888;*/
    margin: 2px;
    padding:1px;
    background-color: #f3f3f3;
}

.inputpicker-multiple ul > li.inputpicker-multiple-input {
    margin-left:2px;
    /*padding-left:5px;*/
}

.inputpicker-pagination {
    background: transparent;
}

.inputpicker-pagination a {
    padding-left:3px;
    padding-right:3px;
}

.inputpicker-pagination span.current-page {
    min-width:50px;
    text-align: center;
    display: inline-block;
}