Jquery mobile Multiselect with filterable selection issue after filteration is done -
i trying use jquery mobiles custom select filterable feature multiselect.
it works great when dont filter options. when filter option selection not happening properly.
it checks other option list.
in jsfiddle demo, once u open dropdown, apply filter , try select english , see issue
below code
<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> <script type="text/javascript"> ( function( $ ) { function pageisselectmenudialog( page ) { var isdialog = false, id = page && page.attr( "id" ); $( ".filterable-select" ).each( function() { if ( $( ).attr( "id" ) + "-dialog" === id ) { isdialog = true; return false; } }); return isdialog; } $.mobile.document // upon creation of select menu, want make use of fact id of // listview generates starts id of select menu itself, plus suffix "-menu". // retrieve listview , insert 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" ); // store generated form in variable attached popup avoid creating // second form/input field when listview destroyed/rebuilt during 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 filterable widget on newly created selectmenu widget , indicate // generated input form element used filtering. selectmenu .filterable({ input: input, //children: "> option[value]" children: "option[value]" }) // rebuild custom select menu's list items reflect results of filtering // done on select menu. .on("filterablefilter", function (event, ui) { }); }) // custom select list may show either popup or dialog, depending on how // vertical room there on screen. if shows dialog, form containing // filter input field must transferred dialog user can continue // use filtering list items. .on( "pagecontainerbeforeshow", function( event, data ) { var listview, form; // handle appearance of dialog generated filterable selectmenu if ( !pageisselectmenudialog( data.topage ) ) { return; } listview = data.topage.find( "ul" ); form = listview.jqmdata( "filter-form" ); //$(".ui-checkbox-off").addclass("custome-ui-checkbox-off"); //$(".ui-checkbox-on").addclass("custome-ui-checkbox-on"); // attach reference listview data item dialog, because during // pagecontainerhide handler below selectmenu widget have returned // listview popup, won't able find inside dialog selector. data.topage.jqmdata( "listview", listview ); // place form before listview in dialog. listview.before( form ); $("div[data-role='header']").find("a[role='button']").removeclass('ui-btn-icon-notext'); $("div[data-role='header']").find("a[role='button']").html('cancel'); // $("div[data-role='header']").html() }) //this event triggered after change request has finished loading page dom , page transition animations have completed. .on( "pagecontainerbeforehide", function( event, data ) { $("div[role='dialog']").css({"position":"fixed","top":"0","left":"0","margin":"0"}); }) // after dialog closed, form containing filter input returned popup. .on( "pagecontainerhide", function( event, data ) { var = $(window).height() - $("div[data-role='header']").height() - $( "div[data-role='content']" ).find( "form" ).outerheight()+"px"; $("div[role='dialog']").css({"position":"fixed","top":"0","left":"0","margin":"0", "height":$(window).height()}); $(".ui-content").css({"height":a}); $( "div[data-role='content']" ).find("ul").css({"overflow-y":"scroll", "height":a}); var listview, form; // handle disappearance of dialog generated filterable selectmenu if ( !pageisselectmenudialog( data.prevpage ) ) { return; } listview = data.prevpage.jqmdata( "listview" ); form = listview.jqmdata( "filter-form" ); // put form in popup. goes ahead of listview. listview.before( form ); //added dialog box again (not part of demo example) $("input[data-type='search']").val("").focus().trigger("change"); }); })( jquery ); </script> i have tried many things couldn't solve it.
you can check custom select menu filter here on jquery demo page.
Comments
Post a Comment