Jquery Mobile Filterable Select Long List -
i'm trying create custom select menu filter on demo page:
http://demos.jquerymobile.com/1.4.5/selectmenu-custom-filter/
it works fine short list:
but it's not working long lists:
https://jsfiddle.net/pppzlbfu/
i keep getting error:
script5007: unable property 'jqmdata' of undefined or null reference
my full code is
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>filterable inside custom select - jquery mobile demos</title> <link rel="shortcut icon" href="../favicon.ico"> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=open+sans:300,400,700"> <link rel="stylesheet" href="jquery.mobile/css/themes/default/jquery.mobile-1.4.5.min.css"> <link rel="stylesheet" href="jquery.mobile/_assets/css/jqm-demos.css"> <script src="jquery.mobile/js/jquery.js"></script> <script src="jquery.mobile/_assets/js/index.js"></script> <script src="jquery.mobile/js/jquery.mobile-1.4.5.min.js"></script> <script> ( 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'></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]" }) // rebuild custom select menu's list items reflect results of filtering // done on select menu. .on( "filterablefilter", function() { selectmenu.selectmenu( "refresh" ); }); }) // 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" ); // 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 ); }) // after dialog closed, form containing filter input returned popup. .on( "pagecontainerhide", function( event, data ) { var listview, form; // handle disappearance of dialog generated filterable selectmenu if ( !pageisselectmenudialog( data.topage ) ) { return; } listview = data.prevpage.jqmdata( "listview" ), form = listview.jqmdata( "filter-form" ); // put form in popup. goes ahead of listview. listview.before( form ); }); })( jquery ); </script> <style> .ui-selectmenu.ui-popup .ui-input-search { margin-left: .5em; margin-right: .5em; } .ui-selectmenu.ui-dialog .ui-content { padding-top: 0; } .ui-selectmenu.ui-dialog .ui-selectmenu-list { margin-top: 0; } .ui-selectmenu.ui-popup .ui-selectmenu-list li.ui-first-child .ui-btn { border-top-width: 1px; -webkit-border-radius: 0; border-radius: 0; } .ui-selectmenu.ui-dialog .ui-header { border-bottom-width: 1px; } </style> </head> <body> <div data-role="page" class="jqm-demos" id="pagemainform"> <div data-role="header" class="jqm-header"> <h2><a href="../" title="jquery mobile demos home"><img src="../_assets/img/jquery-logo.png" alt="jquery mobile"></a></h2> <p>demos <span class="jqm-version"></span></p> <a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">menu</a> <a href="#" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">search</a> </div><!-- /header --> <div data-role="content" class="ui-content jqm-content"> <h1>filterable inside custom select</h1> <div data-demo-html="true" data-demo-js="true" data-demo-css="true"> <form> <select id="filter-menu" class="filterable-select" data-native-menu="false"> <option value="option 1">option 1</option> <option value="option 2">option 2</option> <option value="option 3">option 3</option> <option value="option 4">option 4</option> <option value="option 5">option 5</option> <option value="option 6">option 6</option> <option value="option 7">option 7</option> <option value="option 8">option 8</option> <option value="option 9">option 9</option> <option value="option 10">option 10</option> <option value="option 11">option 11</option> <option value="option 12">option 12</option> <option value="option 13">option 13</option> <option value="option 14">option 14</option> <option value="option 15">option 15</option> <option value="option 16">option 16</option> <option value="option 17">option 17</option> <option value="option 18">option 18</option> <option value="option 19">option 19</option> <option value="option 20">option 20</option> <option value="option 21">option 21</option> <option value="option 22">option 22</option> </select> </form> </div> </div><!-- /content --> </div><!-- /page --> </body> </html>
here's solution if still need it: demo has errors. here way it:
// demo-dialog id of selectmenu (demo) + (-dialog) added // jqm dynamically upon creating custom selectmenu
$(document).on("pagecreate", "#demo-dialog", function (e) { var form = $("<form><input data-type='search'/></form>"), page = $(this); $(".ui-content", this) .prepend(form); form.enhancewithin() .on("keyup", "input", function () { var data = $(this).val().tolowercase(); $("li", page).addclass("ui-screen-hidden") .filter(function (i, v) { return $(this).text().tolowercase().indexof(data) > -1; }).removeclass("ui-screen-hidden"); }); $(document).on("pagecontainerhide", function () { $("#demo-menu li").removeclass("ui-screen-hidden"); $("input", form).val(""); }); });
for reference: https://forum.jquery.com/topic/cannot-read-property-jqmdata-of-undefined
Comments
Post a Comment