JQM custom select with filter for multiselect

by dirtycode

HTML

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<div class="page_1">
        <!-- Form Starts -->
        <div class="form_wrap" id="form_wrapper">
            <form method="post" name="frm_registration" autocomplete="off"  style="margin:0px">
                <div class="formfd_wrap ">
                    <label>Mother Tongue</label>
                    <select id="mother_tongue" name="mother_tongue" multiple="multiple" data-native-menu="false" class="filterable-select reg_inputdrpbox">
                        <option value="Assamese" >Assamese</option>
                        <option value="Bengali" >Bengali</option>
                        <option value="English" >English</option>
                        <option value="Gujarati" >Gujarati</option>
                        <option value="Hindi" >Hindi</option>
                        <option value="Kannada" >Kannada</option>
                        <option value="Odia" >Odia</option>
                        <option value="Pashto" >Pashto</option>
                        <option value="Persian" >Persian</option>
                        <option value="Punjabi" >Punjabi</option>
                        <option value="Rajasthani" >Rajasthani</option>
                        <option value="Russian" >Russian</option>
                        <option value="Sanskrit" >Sanskrit</option>
                        <option value="Sindhi" >Sindhi</option>
                        <option value="Sinhala" >Sinhala</option>
                        <option value="Spanish" >Spanish</option>
                    </select>
                </div>
            </form>
        </div>
    </div>

JavaScript

( function( $ ) {

            function pageIsSelectmenuDialog( page ) {
                var isDialog = false,
                id = page && page.attr( "id" );
                $( ".filterable-select" ).each( function() {
                    if ( $( this ).attr( "id" ) + "-dialog" === id ) {
                        isDialog = true;
                        return false;
                    }
                });
                return isDialog;
            }

            $.mobile.document
            // Upon creation of the select menu, we want to make use of the fact that the ID of the
            // listview it generates starts with the ID of the select menu itself, plus the suffix "-menu".
            // We retrieve the listview and insert a search input before it.
            .on( "selectmenucreate", ".filterable-select", function( event ) {
                var input,
                selectmenu = $( event.target ),
                list = $( "#" + selectmenu.attr( "id" ) + "-menu" ),
                form = list.jqmData( "filter-form" );
                // We store the generated form in a variable attached to the popup so we avoid creating a
                // second form/input field when the listview is destroyed/rebuilt during a refresh.
                if ( !form ) {
                    input = $( "<input data-type='search' placeholder='Search'></input>" );
                    form = $( "<form></form>" ).append( input );
                    input.textinput();
                    list
                    .before( form )
                    .jqmData( "filter-form", form ) ;
                    form.jqmData( "listview", list );
                }
                // Instantiate a filterable widget on the newly created selectmenu widget and indicate that
                // the generated input form element is to be used for the filtering.
                selectmenu
                    .filterable({
                        input: input,
                       ...