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