Options

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

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"}
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');

Events

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

HTML

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>

CSS

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;
}