Search code examples
javascriptjquerycssmulti-selectbootstrap-multiselect

bootstrap multiselect filterClearBtn not showing


I'm using Bootstrap multiselect and everything is fine, but when I enable the enableFiltering = true option, the clear filter button doesn't show. this is how I initialize the component:

$("#ultra").multiselect({
        buttonWidth: '100%',
         enableFiltering: true,
         includeSelectAllOption: true,
         nSelectedText: 'Selecciones',
         nonSelectedText: 'Sin Aplicar',
         includeFilterClearBtn:true,
         filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter" type="button"><i class="glyphicon glyphicon-remove-circle"></i></button></span>'
    });

Solution

  • I will answer my own question in case it is useful for someone else in the future:

    the pugin use glyphicon and I did't have it downloaded in my project, so download and install can be a possible solution. But in my case i used fa-icons to add this change just have to modify the attribute templates of the multiselect here the example: just here: class="fa fa-eraser"

    $("#mySelect").multiselect({       
            nSelectedText: 'Selecciones',
            enableHTML: true,
            templates: {
                filter: '<li class="multiselect-item multiselect-filter"><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-search"></i></span></div><input class="form-control multiselect-search" type="text" /></div></li>',
                filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter" type="button"><i class="fa fa-eraser"></i></button></span>'
    
            }
        });