Skip to content
Advertisement

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

Advertisement

Answer

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();
User contributions licensed under: CC BY-SA
6 People found this is helpful
Advertisement