Multiselect Filter

by bilbobaggins

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/matt212/Custom-Multiselect@master/app/public/multiselect.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.3/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/gh/matt212/Custom-Multiselect-AutoComplete@master/app/public/multiselect.js"></script>
<h6>Type 'm' or '  f'</h6>
<input type="text" style="width:45%;" class="form-control" id="cltrl_filter_gender" placeholder="gender">
<br>
<br>
<h6>use case wherein one has to set/assign values to control</h6>
    <input type="text" style="width:45%;" class="form-control" id="cltrl_filter_first_name" placeholder="first_name">

JavaScript

$(document).ready(function () {
 multiselect.baseInit({ id: 'cltrl_filter_gender', fieldname: 'gender' })
 
 /*FOR EDIT*/
 multiselect.multiSelectpopulate({
                rows: [{
                    first_name: "mark"
                }, {
                    first_name: "jacob"
                }]
                , fieldname: 'first_name'
                , id: 'cltrl_filter_first_name'
            })
 
})
let cltrl_filter_gender = function (a) {
           /*me.remotefunc is important since it is used in mutliselect call and rendering*/
           me.remotefunc = function (base) {
               return new Promise(function (resolve, reject) {
                   /*response in this format*/
                   resolve({
                       rows: [{
                           gender: "m"
                       }, {
                           gender: "f"
                       }]
                   })
               })
           }
           /*multiselect Search Init*/
           multiselect.searchbarautocomplete(a)
       }