Inputpicker dispose filter after setting value

user_4194536 0
Viewed 397

I am using "Jquery inputpicker plugin" which its references can be find here. I use this plugin for dropdown menus. I initiate my drop down using below code:

$('#test').inputpicker({
    data:[
        {value:"1",text:"USD"},
        {value:"2",text:"EUR"},
        {value:"3",text:"CNY"}
    ],
    fields:[
        {name:'value',text:'Id'},
        {name:'text',text:'Title'}
    ],
    autoOpen: true,
    headShow: false,
    filterOpen: true,
    fieldText : 'text',
    fieldValue: 'value'
    });

I can set selected item of my list by code:

$('#test').inputpicker('val', 1); // selecting "USD"

after setting the value of my field , when users try to open the drop down and look for another item, there is no item visible but "USD". For selecting another item, user should erase all characters manually, then other items will be displayed.

I am looking for a way to show all items after setting selected item.

I have created a sample of my code here: https://jsfiddle.net/6eL9pfdw/

dropdown input jquery javascript
2 Answers

Hacky but it works:

Set the filterOpen: false, this will prevent filtering the data on the first open.

Bind to focus event and set the filterOpen = true. This will re-enable the filtering.

$(document).ready(function(){
  $('#test').inputpicker("val" , "1");
});

$('#test').inputpicker({
    data:[
        {value:"1",text:"USD"},
        {value:"2",text:"EUR"},
        {value:"3",text:"CNY"}
    ],
    fields:[
        {name:'value',text:'Id'},
        {name:'text',text:'Title'}
    ],
    autoOpen: true,
    headShow: false,
    filterOpen: false,
    fieldText : 'text',
    fieldValue: 'value'
});

$('#inputpicker-1').on("focus", function() {
    $('#test').inputpicker("set" , "filterOpen", true);
});
user_11579520

I think, you should deactivate the filter at the start of the code otherwise, it will display only what is provided according to the content of the textbox.

According to the document of InputPicker, setting filterOpen to false deactivates filter and all your data will be displayed.

enter image description here

More precisely, you only have to set it to false in your initial code

  $(document).ready(function(){
  $('#test').inputpicker("val" , "1");
});

$('#test').inputpicker({
    data:[
        {value:"1",text:"USD"},
        {value:"2",text:"EUR"},
        {value:"3",text:"CNY"}
    ],
    fields:[
        {name:'value',text:'Id'},
        {name:'text',text:'Title'}
    ],
    autoOpen: true,
    headShow: false,
    filterOpen: false,
    fieldText : 'text',
    fieldValue: 'value'
});
user_75616970
Related