D_ROCKS February 2016

Search Not Working In Dynamic Bootstrap Multiselect

I'm using http://davidstutz.github.io/bootstrap-multiselect/ for creating bootstrap multiselect controls in my webpage.

The below fiddle link with static data is what I want to achieve using dynamic data:

https://jsfiddle.net/DROCKS/mrmLrsad/4/

//please refer the fiddle

The search option works fine in case the values of the select box are static, but if they are dynamically created, the multiselect gets created. However the search filter is not working in this case. However the my code is similar to the fiddle below, the only difference being that the search filter part doesn't work in my actual code, but works in this fiddle.

fiddle link with dynamic data. https://jsfiddle.net/DROCKS/mrmLrsad/5/

//please refer the fiddle

This is my code. HTML code

<select id="lstFieldList" ></select>

jQuery code [Updated]:

function uncheckFields(field_id)
{
    $('#' + field_id).multiselect('deselectAll', true);
}

//json_obj is the value from the fiddle.

createMultiSelectBox(json_obj);

//this function creates the multiselect
function createMultiSelectBox(json_obj)
{
    var element_String = "";
    var default_ele_set = 0;
    var def_element_first = "1";                            //if the first Y flag should be considered
    var def_element_last = "n";                             //if the last Y flag should be considered
    var def_element = def_element_first;            //change the value here to toggle between default selection
    var tmp = [];

    for (var key in json_obj)
    {
        var val = json_obj[key];
        //alert("Key: " + key);

        var chk_box_ctr = 0;
        var element;

               

Answers


Anoop LL February 2016

create an array var tmp = [];

create a json like this while looping for option

element = {"label": this.Name,"value":this.id};

and push each element to tmp

tmp.push(element);

and pass this tmp array to multi select

$("#lstFieldList").multiselect('dataprovider', tmp);

and add multiselect to dropdown by

 $("#lstFieldList").multiselect({
                              maxHeight: 260,
                              buttonWidth:"100%",
                              enableFiltering:true,
                              enableCaseInsensitiveFiltering:true,
                            });

Post Status

Asked in February 2016
Viewed 3,293 times
Voted 4
Answered 1 times

Search




Leave an answer