/js/jquery.mobile.listview.filter.js

https://github.com/asklion/jquery-mobile · JavaScript · 118 lines · 73 code · 28 blank · 17 comment · 14 complexity · c01fd844de7b5781613ff903466ba191 MD5 · raw file

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