Home > Enterprise >  Javascript Bootstrap Multiselect - Show search dropdown if no options available
Javascript Bootstrap Multiselect - Show search dropdown if no options available

Time:06-15

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

CodePudding user response:

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();
  • Related