Basic

Initiate a basic input with multiple options

Example

Source code

<input class="form-control" id="test" value="Text 2" />
<script>
$('#test').inputpicker({
    data:[ "Text 1", "Text 2", "Text 3" ],
    autoOpen: true
});
</script>

Multiple fields

You set multiple fields and show them in a line and also show the head by setting the option "headShow".

Example

Source code

<input class="form-control" id="test" value="2" />
<script>
$('#test').inputpicker({
    data:[
        {value:"1",text:"Text 1", description: "This is the description of the text 1."},
        {value:"2",text:"Text 2", description: "This is the description of the text 2."},
        {value:"3",text:"Text 3", description: "This is the description of the text 3."}
    ],
    fields:[
        {name:'value',text:'Id'},
        {name:'text',text:'Title'},
        {name:'description',text:'Description'}
    ],
    autoOpen: true,
    headShow: true,
    fieldText : 'text',
    fieldValue: 'value'
    });
</script>

Filter input

Set "filterOpen" as true/false to filter/un-filter the result from the list, set "filterType" to choose the filter type and "filterField" to choose which fields would be searched

Example

Source code

<input class="form-control" id="test" value="2" />
<script>
$('#test').inputpicker({
    data:[
        {value:"1",text:"Text 1", description: "This is the description of the text 1."},
        {value:"2",text:"Text 2", description: "This is the description of the text 2."},
        {value:"3",text:"Text 3", description: "This is the description of the text 3."}
    ],
    fields:['value','text','description'],
    fieldText : 'text',
    headShow: true,
    filterOpen: true,
    autoOpen: true
});
</script>

Set "mutiple" as true/false to filter/un-filter the result from the list, set "filterType" to choose the filter type and "filterField" to choose which fields would be searched

Example

Source code

<input class="form-control" id="test" value="1,2" />
<script>
$('#test').inputpicker({
    data:[
        {value:"1",text:"Text 1", description: "This is the description of the text 1."},
        {value:"2",text:"Text 2", description: "This is the description of the text 2."},
        {value:"3",text:"Text 3", description: "This is the description of the text 3."}
    ],
    fields:['value','text','description'],
    fieldText : 'text',
    multiple: true,
    headShow: true,
    filterOpen: true,
    autoOpen: true
});
</script>

JSON

Load JSON file regions.json and parse it into the list

Example

Source code

<input class="form-control" id="test" value="Text 2" />
<script>
$('#test').inputpicker({
    url: '../src/example-regions.json',
    fields:['id','name','hasc'],
    fieldText:'name',
    fieldValue:'id',
    filterOpen: true
});
</script>

JSON - Remote Search

Send keyword to the remote source and parse it into the list

Example

Source code

<input class="form-control" id="test" value="Text 2" />
<script>
$('#test').inputpicker({
    url: './example-json.php',
    fields:['id','name','hasc'],
    fieldText:'name',
    fieldValue:'id',
    filterOpen: true
});
</script>

JSON - Remote Search with Pagination

Send keyword to the remote source and parse it into the list

Example

Source code

<input class="form-control" id="test" value="" />
<script>
$('#test').inputpicker({
    url: './example-json.php',
    urlHeaders: {
        "X-Token": "This is a test token"
    },
    fields:['id','name','hasc'],
    fieldText:'name',
    fieldValue:'id',
    pagination: true,
    pageMode: '',
    pageField: 'p',
    pageLimitField: 'per_page',
    limit: 5,
    pageCurrent: 1,
});
</script>