libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.listview.filter.js

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