Home Forums Porto Admin Template Multiselct with search using javascript

This topic contains 5 replies, has 2 voices, and was last updated by  Support2 2 months, 1 week ago. This post has been viewed 162 times

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #10029982

    fl-330
    Participant

    Hello

    I need to use javascript instead of data attributes for multiselect with search.

    <select class="form-control" multiple="multiple" data-plugin-multiselect data-plugin-options='{ "maxHeight": 200, "enableCaseInsensitiveFiltering": true }' id="ms_example6">														<optgroup label="Mathematics">															<option value="analysis">Analysis</option>															<option value="algebra">Linear Algebra</option>															<option value="discrete">Discrete Mathematics</option>															<option value="numerical">Numerical Analysis</option>															<option value="probability">Probability Theory</option>														</optgroup>														<optgroup label="Computer Science">															<option value="programming">Introduction to Programming</option>															<option value="automata">Automata Theory</option>															<option value="complexity">Complexity Theory</option>															<option value="software">Software Engineering</option>														</optgroup>													</select>

    How can I achieve that ?

    Best regards


    • This topic was modified 2 months, 1 week ago by  Support2.

    Template Version: 2.1.1
    #10029985

    Support2
    Keymaster

    Hello,

    Here is the code you need:

    1) HTML:

    <select class="form-control my-custom-multiselect" multiple="multiple">.........</select>

    * Note the class my-custom-multiselect.

    2) (js/custom.js):

    $('.my-custom-multiselect').multiselect({
    	maxHeight: 200,
    	enableCaseInsensitiveFiltering: true,
    	templates: {
    		li: '<li><a class="dropdown-item" tabindex="0"><label style="display: block;"></label></a></li>',
    		filter: '<div class="input-group"><span class="input-group-prepend"><span class="input-group-text"><i class="fas fa-search"></i></span></span><input class="form-control multiselect-search" type="text"></div>'
    	}
    });

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10029987

    fl-330
    Participant
    This reply has been marked as private.
    #10029988

    Support2
    Keymaster

    Hello,

    Thanks for the link.

    Inspecting your code we saw that you are creating the select field trough a JS script. So the custom.js code is running before the select field being added/rendered on the DOM. You need to run the JS code we provided before, using a callback from the script that creates the select field (MXWdigets). Probably the MXWdigets has an documentation that’s where you can find the correct callback.

    Or you can just put the code inside a setTimeout(). But we recommend you use a callback from the MXWdigets.

    If you want use the setTimeout() here is the code:

    setTimeout(function(){
        $('.my-custom-multiselect').multiselect({
    		maxHeight: 200,
    		enableCaseInsensitiveFiltering: true,
    		templates: {
    			li: '<li><a class="dropdown-item" tabindex="0"><label style="display: block;"></label></a></li>',
    			filter: '<div class="input-group"><span class="input-group-prepend"><span class="input-group-text"><i class="fas fa-search"></i></span></span><input class="form-control multiselect-search" type="text"></div>'
    		}
    	});
    }, 3000);

    * This will run the code after 3 seconds when the page loads.

    Hope this helps.

    Kind Regards,

    Rodrigo.


    #10029989

    fl-330
    Participant

    Hello Rodrigo

    Thanks for you support, It works using a timeout.
    Don’t know if it’s a good idea to make modifications in the mxwidgets javascript as some other form controls are related to it.

    Best regards.


    #10029991

    Support2
    Keymaster

    Hello,

    Great!

    If you need further assistance feel free to contact us.

    Kind Regards,

    Rodrigo.


Viewing 6 posts - 1 through 6 (of 6 total)