Search code examples
javascriptjquerytwitter-bootstrapmulti-selectbootstrap-multiselect

Javascript Bootstrap Multiselect - Show search dropdown if no options available


I'm using bootstrap-multiselect (https://github.com/davidstutz/bootstrap-multiselect) and want to dynamically load the data similar to bootstrap multiselect search get value from database, but on initial start there are no option values available, then by default the search dropdown is not showing. How can I still open/show the search dropdown if no options are available? Here is a fiddle: https://jsfiddle.net/mwd4ag3h/

html:

<select id="example-getting-started" multiple="multiple"></select>

js:

$('#example-getting-started').multiselect({
    enableFiltering: true,
    includeFilterClearBtn: true,
    enableCaseInsensitiveFiltering: true
});

/* Here you have a search field */
var data_loader = [
    { label: "Dashboard", value: 1 },
    { label: "Email", value: 2 }
];

/* Here you don't have a search field */
var data_loader_empty = [];

$('#example-getting-started').multiselect('dataprovider', data_loader_empty);

Solution

  • A possible solution is to add an element to the multiselect and then hide the list item

    let $select = $('#example-getting-started').multiselect({
      //includeSelectAllOption: false,
      enableFiltering: true,
      includeFilterClearBtn: true,
      enableCaseInsensitiveFiltering: true
    });
    var data_loader = [{label:'', value:''}];
    $('#example-getting-started').multiselect('dataprovider', data_loader);
    $('.multiselect-container li').hide();