1. <input class="basic-search" type="text" data-filter-list=".fruit-list-1"/>
  3. <div id="list" style="overflow:auto;height:150px;border: 2px solid grey;">
  4. <ul class="list fruit-list-1">
  5. <li class="list" style="padding-left:10px"><a href="http://example.com" target="_blank">List Irem 1</a></li>
  6. </ul>
  7. <ul class="list fruit-list-1">
  8. <li class="list" style="padding-left:10px"><a href="http://example.com" target="_blank">List Item 2</a></li>
  9. </ul>
  10. </div>
  12. <script src="/js/jquery.filter-list.js"></script>
  13. <script>
  14. /**
  15. * jquery.filter-list.js
  16. * ------------------------------------------------------
  17. * Authors: Jeroen Ransijn
  18. * Company: Aan Zee
  19. * version: 1.0
  20. * Usage: $('[data-filter-list]').filterList();
  21. */
  22. ;(function (root, $, undefined) {
  23. "use strict";
  25. var pluginName = "filterList";
  26. var defaults = {
  27. isToggledWithClassNames: false,
  28. isFilteredOnKeyup: true,
  29. filterListAttribute: 'data-filter-list',
  30. selectorItem: 'li',
  31. classNameHidden: 'is-hidden',
  32. classNameShown: 'is-shown'
  33. };
  35. // Case-insensitive "contains"
  36. $.expr[':'].Contains = function(a,i,m){
  37. return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  38. };
  40. // The actual plugin constructor
  41. function Plugin( element, options ) {
  42. this.element = element;
  43. this.$el = $(element);
  45. this.options = $.extend( {}, defaults, options) ;
  47. this._defaults = defaults;
  48. this._name = pluginName;
  50. this.init();
  51. }
  53. Plugin.prototype = {
  55. init: function () {
  56. var listSelector = this.$el.attr( this.options['filterListAttribute'] );
  57. this.$list = $(listSelector);
  58. 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. }
  74. this.$el.trigger('reset');
  75. },
  76. _onKeyup: function (e) {
  77. if ((e && e.which == 13 || this.options['isFilteredOnKeyup']) ) {
  78. this.search();
  79. }
  80. },
  81. search: function () {
  82. var searchValue = this.$el.val();
  84. if (searchValue.trim() === "") {
  85. return this.reset();
  86. }
  88. var matches = this.$items.filter(':Contains(' + searchValue + ')');
  89. var nonMatches = this.$items.not( matches );
  91. // Hide non matches
  92. if ( this.options['isToggledWithClassNames'] ) {
  93. nonMatches
  94. .addClass( this.options['classNameHidden'] )
  95. .removeClass(this.options['classNameShown']);
  96. } else {
  97. nonMatches.hide();
  98. }
  100. // Show matches
  101. if ( this.options['isToggledWithClassNames'] ) {
  102. matches
  103. .removeClass( this.options['classNameHidden'] )
  104. .addClass( this.options['classNameShown'] );
  105. } else {
  106. matches.show();
  107. }
  109. this.$el.trigger('filter', [searchValue || "", matches, nonMatches]);
  110. },
  111. getList: function () {
  112. return this.$list;
  113. }
  114. };
  116. // A really lightweight plugin wrapper around the constructor,
  117. // preventing against multiple instantiations
  118. $.fn[pluginName] = function ( options ) {
  119. return this.each(function () {
  120. if ( ! $.data(this, "plugin-" + pluginName)) {
  121. $.data(this, "plugin-" + pluginName,
  122. new Plugin( this, options ));
  123. }
  124. });
  125. };
  127. })(this, jQuery);
  129. $(function () {
  130. // Document ready
  131. $('.basic-search').filterList();
  133. $('.basic-search-on-enter').filterList({
  134. isFilteredOnKeyup: false
  135. });
  137. $('.trigger-enter').on('click', function (e) {
  138. e.preventDefault();
  139. $(this).parent().find('input').trigger('search');
  140. });
  142. $('.use-class-names').filterList({
  143. isToggledWithClassNames: true
  144. });
  145. });
  146. </script>