1. <script src="/js/jquery.filter-list.js"></script>
  2. <script>
  3. (function($) {
  5. // $ Works! You can test it with next line if you like
  6. // console.log($);
  8. })( jQuery );
  9. </script>
  10. <script>
  11. /**
  12. * jquery.filter-list.js
  13. * ------------------------------------------------------
  14. * Authors: Jeroen Ransijn
  15. * Company: Aan Zee
  16. * version: 1.0
  17. * Usage: $('[data-filter-list]').filterList();
  18. */
  19. ;(function (root, $, undefined) {
  20. "use strict";
  22. var pluginName = "filterList";
  23. var defaults = {
  24. isToggledWithClassNames: false,
  25. isFilteredOnKeyup: true,
  26. filterListAttribute: 'data-filter-list',
  27. selectorItem: 'li',
  28. classNameHidden: 'is-hidden',
  29. classNameShown: 'is-shown'
  30. };
  32. // Case-insensitive "contains"
  33. $.expr[':'].Contains = function(a,i,m){
  34. return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  35. };
  37. // The actual plugin constructor
  38. function Plugin( element, options ) {
  39. this.element = element;
  40. this.$el = $(element);
  42. this.options = $.extend( {}, defaults, options) ;
  44. this._defaults = defaults;
  45. this._name = pluginName;
  47. this.init();
  48. }
  50. Plugin.prototype = {
  52. init: function () {
  53. var listSelector = this.$el.attr( this.options['filterListAttribute'] );
  54. this.$list = $(listSelector);
  55. this.$items = this.$list.find( this.options['selectorItem'] );
  57. if (this.$list.length > 0) {
  58. this.$el
  59. .on('keyup', this._onKeyup.bind(this))
  60. .on('search', this.search.bind(this));
  61. }
  62. },
  63. reset: function () {
  64. if ( this.options['isToggledWithClassNames'] ) {
  65. this.$list.find( this.options['selectorItem'] )
  66. .removeClass(this.options['classNameHidden'] + ' ' + this.options['classNameShown']);
  67. } else {
  68. this.$list.find( this.options['selectorItem'] ).show();
  69. }
  71. this.$el.trigger('reset');
  72. },
  73. _onKeyup: function (e) {
  74. if ((e && e.which == 13 || this.options['isFilteredOnKeyup']) ) {
  75. this.search();
  76. }
  77. },
  78. search: function () {
  79. var searchValue = this.$el.val();
  81. if (searchValue.trim() === "") {
  82. return this.reset();
  83. }
  85. var matches = this.$items.filter(':Contains(' + searchValue + ')');
  86. var nonMatches = this.$items.not( matches );
  88. // Hide non matches
  89. if ( this.options['isToggledWithClassNames'] ) {
  90. nonMatches
  91. .addClass( this.options['classNameHidden'] )
  92. .removeClass(this.options['classNameShown']);
  93. } else {
  94. nonMatches.hide();
  95. }
  97. // Show matches
  98. if ( this.options['isToggledWithClassNames'] ) {
  99. matches
  100. .removeClass( this.options['classNameHidden'] )
  101. .addClass( this.options['classNameShown'] );
  102. } else {
  103. matches.show();
  104. }
  106. this.$el.trigger('filter', [searchValue || "", matches, nonMatches]);
  107. },
  108. getList: function () {
  109. return this.$list;
  110. }
  111. };
  113. // A really lightweight plugin wrapper around the constructor,
  114. // preventing against multiple instantiations
  115. $.fn[pluginName] = function ( options ) {
  116. return this.each(function () {
  117. if ( ! $.data(this, "plugin-" + pluginName)) {
  118. $.data(this, "plugin-" + pluginName,
  119. new Plugin( this, options ));
  120. }
  121. });
  122. };
  124. })(this, jQuery);
  126. $(function () {
  127. // Document ready
  128. $('.basic-search').filterList();
  130. $('.basic-search-on-enter').filterList({
  131. isFilteredOnKeyup: false
  132. });
  134. $('.trigger-enter').on('click', function (e) {
  135. e.preventDefault();
  136. $(this).parent().find('input').trigger('search');
  137. });
  139. $('.use-class-names').filterList({
  140. isToggledWithClassNames: true
  141. });
  142. });
  143. </script>