libs/js/jquery-mobile-1.1.0/js/jquery.mobile.listview.filter.js

   1 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
   2 //>>description: Extends the listview to add a search box to filter lists
   3 //>>label: Listview: Filter
   4 //>>group: Widgets
   5
   6
   7 define( [ "jquery", "./jquery.mobile.listview", "./jquery.mobile.forms.textinput" ], function( $ ) {
   8 //>>excludeEnd("jqmBuildExclude");
   9 (function( $, undefined ) {
  10
  11 $.mobile.listview.prototype.options.filter = false;
  12 $.mobile.listview.prototype.options.filterPlaceholder = "Filter items...";
  13 $.mobile.listview.prototype.options.filterTheme = "c";
  14 $.mobile.listview.prototype.options.filterCallback = function( text, searchValue ){
  15         return text.toLowerCase().indexOf( searchValue ) === -1;
  16 };
  17
  18 $( document ).delegate( ":jqmData(role='listview')", "listviewcreate", function() {
  19
  20         var list = $( this ),
  21                 listview = list.data( "listview" );
  22
  23         if ( !listview.options.filter ) {
  24                 return;
  25         }
  26
  27         var wrapper = $( "<form>", {
  28                         "class": "ui-listview-filter ui-bar-" + listview.options.filterTheme,
  29                         "role": "search"
  30                 }),
  31                 search = $( "<input>", {
  32                         placeholder: listview.options.filterPlaceholder
  33                 })
  34                 .attr( "data-" + $.mobile.ns + "type", "search" )
  35                 .jqmData( "lastval", "" )
  36                 .bind( "keyup change", function() {
  37
  38                         var $this = $(this),
  39                                 val = this.value.toLowerCase(),
  40                                 listItems = null,
  41                                 lastval = $this.jqmData( "lastval" ) + "",
  42                                 childItems = false,
  43                                 itemtext = "",
  44                                 item;
  45
  46                         // Change val as lastval for next execution
  47                         $this.jqmData( "lastval" , val );
  48                         if ( val.length < lastval.length || val.indexOf(lastval) !== 0 ) {
  49
  50                                 // Removed chars or pasted something totally different, check all items
  51                                 listItems = list.children();
  52                         } else {
  53
  54                                 // Only chars added, not removed, only use visible subset
  55                                 listItems = list.children( ":not(.ui-screen-hidden)" );
  56                         }
  57
  58                         if ( val ) {
  59
  60                                 // This handles hiding regular rows without the text we search for
  61                                 // and any list dividers without regular rows shown under it
  62
  63                                 for ( var i = listItems.length - 1; i >= 0; i-- ) {
  64                                         item = $( listItems[ i ] );
  65                                         itemtext = item.jqmData( "filtertext" ) || item.text();
  66
  67                                         if ( item.is( "li:jqmData(role=list-divider)" ) ) {
  68
  69                                                 item.toggleClass( "ui-filter-hidequeue" , !childItems );
  70
  71                                                 // New bucket!
  72                                                 childItems = false;
  73
  74                                         } else if ( listview.options.filterCallback( itemtext, val ) ) {
  75
  76                                                 //mark to be hidden
  77                                                 item.toggleClass( "ui-filter-hidequeue" , true );
  78                                         } else {
  79
  80                                                 // There's a shown item in the bucket
  81                                                 childItems = true;
  82                                         }
  83                                 }
  84
  85                                 // Show items, not marked to be hidden
  86                                 listItems
  87                                         .filter( ":not(.ui-filter-hidequeue)" )
  88                                         .toggleClass( "ui-screen-hidden", false );
  89
  90                                 // Hide items, marked to be hidden
  91                                 listItems
  92                                         .filter( ".ui-filter-hidequeue" )
  93                                         .toggleClass( "ui-screen-hidden", true )
  94                                         .toggleClass( "ui-filter-hidequeue", false );
  95
  96                         } else {
  97
  98                                 //filtervalue is empty => show all
  99                                 listItems.toggleClass( "ui-screen-hidden", false );
 100                         }
 101                         listview._refreshCorners();
 102                 })
 103                 .appendTo( wrapper )
 104                 .textinput();
 105
 106         if ( listview.options.inset ) {
 107                 wrapper.addClass( "ui-listview-filter-inset" );
 108         }
 109
 110         wrapper.bind( "submit", function() {
 111                 return false;
 112         })
 113         .insertBefore( list );
 114 });
 115
 116 })( jQuery );
 117 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
 118 });
 119 //>>excludeEnd("jqmBuildExclude");