From c37923113ed75fedeff74d0c7743130b6521af0a Mon Sep 17 00:00:00 2001 From: ShrmnK Date: Thu, 28 Jan 2016 22:18:36 +0800 Subject: [PATCH 1/6] Added hideOnInit option Hides all list items upon initialization such that items will only appear after the input has changed at least once. --- README.md | 4 +++- jquery.fastLiveFilter.js | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index b80b046..7806be6 100644 --- a/README.md +++ b/README.md @@ -37,12 +37,14 @@ Available options: - timeout: How many milliseconds to wait after keydown before filtering the list. Default is 0. - callback: A callback method which will be given the number of items left in the list. - selector: By default, the plugin will match the filter against the text of the `li`. If specifed, the selector will be applied to the `li` and the resulting text will be used instead. **WARNING:** Use of complex selectors may reduce performance significantly, especially in large lists! +- hideOnInit: true/false; Hides all the list items after initialization. Default: false Example: $('#search_input').fastLiveFilter('#search_list', { timeout: 200, - callback: function(total) { $('#num_results').html(total); } + callback: function(total) { $('#num_results').html(total); }, + hideOnInit: true }); Problems? Want to contribute? diff --git a/jquery.fastLiveFilter.js b/jquery.fastLiveFilter.js index bd53494..afc5f67 100644 --- a/jquery.fastLiveFilter.js +++ b/jquery.fastLiveFilter.js @@ -14,7 +14,7 @@ jQuery.fn.fastLiveFilter = function(list, options) { var lastFilter = ''; var timeout = options.timeout || 0; var callback = options.callback || function() {}; - + var hideOnInit = options.hideOnInit || false; var keyTimeout; // NOTE: because we cache lis & len here, users would need to re-init the plugin @@ -23,8 +23,10 @@ jQuery.fn.fastLiveFilter = function(list, options) { var lis = list.children(); var len = lis.length; var oldDisplay = len > 0 ? lis[0].style.display : "block"; + if(hideOnInit) { list[i].each(function() { this.style.display = "none"; }); } callback(len); // do a one-time callback on initialization to make sure everything's in sync + input.change(function() { // var startTime = new Date().getTime(); var filter = input.val().toLowerCase(); From 7cfb6aa126f992521bcbe2a24b30faa1d5b2f6a7 Mon Sep 17 00:00:00 2001 From: ShrmnK Date: Thu, 28 Jan 2016 22:31:39 +0800 Subject: [PATCH 2/6] Fixed hideOnInit --- jquery.fastLiveFilter.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/jquery.fastLiveFilter.js b/jquery.fastLiveFilter.js index afc5f67..93af0be 100644 --- a/jquery.fastLiveFilter.js +++ b/jquery.fastLiveFilter.js @@ -23,7 +23,11 @@ jQuery.fn.fastLiveFilter = function(list, options) { var lis = list.children(); var len = lis.length; var oldDisplay = len > 0 ? lis[0].style.display : "block"; - if(hideOnInit) { list[i].each(function() { this.style.display = "none"; }); } + if(hideOnInit) { + lis.each(function() { + this.style.display = "none"; + }); + } callback(len); // do a one-time callback on initialization to make sure everything's in sync From 7c3be53173ab58d370069be8bd6fee171fcabcdb Mon Sep 17 00:00:00 2001 From: ShrmnK Date: Thu, 28 Jan 2016 22:42:02 +0800 Subject: [PATCH 3/6] Added hideIfEmpty option Impacts performance minimally - will only check for empty field once per input.change() --- README.md | 1 + jquery.fastLiveFilter.js | 37 ++++++++++++++++++++++--------------- 2 files changed, 23 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 7806be6..a6f5871 100644 --- a/README.md +++ b/README.md @@ -38,6 +38,7 @@ Available options: - callback: A callback method which will be given the number of items left in the list. - selector: By default, the plugin will match the filter against the text of the `li`. If specifed, the selector will be applied to the `li` and the resulting text will be used instead. **WARNING:** Use of complex selectors may reduce performance significantly, especially in large lists! - hideOnInit: true/false; Hides all the list items after initialization. Default: false +- hideIfEmpty: true/false; Hides all list items if the search field is empty. Default: false Example: diff --git a/jquery.fastLiveFilter.js b/jquery.fastLiveFilter.js index 93af0be..ec92d22 100644 --- a/jquery.fastLiveFilter.js +++ b/jquery.fastLiveFilter.js @@ -15,6 +15,7 @@ jQuery.fn.fastLiveFilter = function(list, options) { var timeout = options.timeout || 0; var callback = options.callback || function() {}; var hideOnInit = options.hideOnInit || false; + var hideIfEmpty = options.hideIfEmpty || false; var keyTimeout; // NOTE: because we cache lis & len here, users would need to re-init the plugin @@ -33,23 +34,29 @@ jQuery.fn.fastLiveFilter = function(list, options) { input.change(function() { // var startTime = new Date().getTime(); + var numShown = 0; var filter = input.val().toLowerCase(); var li, innerText; - var numShown = 0; - for (var i = 0; i < len; i++) { - li = lis[i]; - innerText = !options.selector ? - (li.textContent || li.innerText || "") : - $(li).find(options.selector).text(); - - if (innerText.toLowerCase().indexOf(filter) >= 0) { - if (li.style.display == "none") { - li.style.display = oldDisplay; - } - numShown++; - } else { - if (li.style.display != "none") { - li.style.display = "none"; + if (hideIfEmpty && !$.trim(this.value).length) { + lis.each(function() { + this.style.display = "none"; + }); + } else { + for (var i = 0; i < len; i++) { + li = lis[i]; + innerText = !options.selector ? + (li.textContent || li.innerText || "") : + $(li).find(options.selector).text(); + + if (innerText.toLowerCase().indexOf(filter) >= 0) { + if (li.style.display == "none") { + li.style.display = oldDisplay; + } + numShown++; + } else { + if (li.style.display != "none") { + li.style.display = "none"; + } } } } From 36aa71549459e7ea762ad906c38f8c571fd599d1 Mon Sep 17 00:00:00 2001 From: ShrmnK Date: Thu, 28 Jan 2016 22:49:33 +0800 Subject: [PATCH 4/6] Fixed initialization callback returning wrong value upon init if hideIfEmpty is true --- jquery.fastLiveFilter.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/jquery.fastLiveFilter.js b/jquery.fastLiveFilter.js index ec92d22..52581c5 100644 --- a/jquery.fastLiveFilter.js +++ b/jquery.fastLiveFilter.js @@ -24,13 +24,16 @@ jQuery.fn.fastLiveFilter = function(list, options) { var lis = list.children(); var len = lis.length; var oldDisplay = len > 0 ? lis[0].style.display : "block"; - if(hideOnInit) { + if (hideOnInit) { lis.each(function() { this.style.display = "none"; }); } - callback(len); // do a one-time callback on initialization to make sure everything's in sync - + if (hideIfEmpty && !$.trim(this.value).length) { + callback(0); // return the correct value of 0 if the search field is empty upon init + } else { + callback(len); // do a one-time callback on initialization to make sure everything's in sync + } input.change(function() { // var startTime = new Date().getTime(); @@ -67,7 +70,7 @@ jQuery.fn.fastLiveFilter = function(list, options) { }).keydown(function() { clearTimeout(keyTimeout); keyTimeout = setTimeout(function() { - if( input.val() === lastFilter ) return; + if (input.val() === lastFilter) return; lastFilter = input.val(); input.change(); }, timeout); From 5163893f5892b7d937a1be13f96b99c7b0901873 Mon Sep 17 00:00:00 2001 From: ShrmnK Date: Thu, 28 Jan 2016 22:51:19 +0800 Subject: [PATCH 5/6] Fixed initialization callback returning wrong value when hideOnInit is true --- jquery.fastLiveFilter.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/jquery.fastLiveFilter.js b/jquery.fastLiveFilter.js index 52581c5..ce2f7af 100644 --- a/jquery.fastLiveFilter.js +++ b/jquery.fastLiveFilter.js @@ -29,8 +29,8 @@ jQuery.fn.fastLiveFilter = function(list, options) { this.style.display = "none"; }); } - if (hideIfEmpty && !$.trim(this.value).length) { - callback(0); // return the correct value of 0 if the search field is empty upon init + if (hideOnInit || (hideIfEmpty && !$.trim(this.value).length)) { + callback(0); // return the correct value of 0 if the search field is empty upon init or hideOnInit is true } else { callback(len); // do a one-time callback on initialization to make sure everything's in sync } From b6df0630b334b17dfcc575ec5fa717f444853cbe Mon Sep 17 00:00:00 2001 From: ShrmnK Date: Thu, 28 Jan 2016 23:19:25 +0800 Subject: [PATCH 6/6] Fixed typo in Readme; Updated formatting --- README.md | 64 ++++++++++++++++++++++++++++++------------------------- 1 file changed, 35 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index a6f5871..6da7e80 100644 --- a/README.md +++ b/README.md @@ -7,47 +7,53 @@ Usage ----- Include jQuery, the plugin, then initialize the plugin: - - - - +```html + + + +``` The above would work with this HTML: - - -
    -
  • One
    • -
  • Two
    • -
  • Three
    • -
+```html + +
    +
  • One
    • +
  • Two
    • +
  • Three
    • +
+``` Options ------- Options are given as the second argument. Synopsis: - - $(INPUT_SELECTOR).fastLiveFilter(LIST_SELECTOR, options); +```javascript +$(INPUT_SELECTOR).fastLiveFilter(LIST_SELECTOR, options); +``` Available options: -- timeout: How many milliseconds to wait after keydown before filtering the list. Default is 0. -- callback: A callback method which will be given the number of items left in the list. -- selector: By default, the plugin will match the filter against the text of the `li`. If specifed, the selector will be applied to the `li` and the resulting text will be used instead. **WARNING:** Use of complex selectors may reduce performance significantly, especially in large lists! -- hideOnInit: true/false; Hides all the list items after initialization. Default: false -- hideIfEmpty: true/false; Hides all list items if the search field is empty. Default: false +Option | Type | Default | Description +------ | ---- | ------- | ----------- +timeout | integer | 0 | How many milliseconds to wait after keydown before filtering the list +hideOnInit | boolean | false | Hides all the list items after initialization +hideIfEmpty | boolean | false | Hides all list items if the search field is empty +callback | function | none | A callback method which will be given the number of items left in the list +selector | jQuery selector | text of `li` | By default, the plugin will match the filter against the text of the `li`. If specifed, the selector will be applied to the `li` and the resulting text will be used instead. **WARNING:** Use of complex selectors may reduce performance significantly, especially in large lists! Example: - - $('#search_input').fastLiveFilter('#search_list', { - timeout: 200, - callback: function(total) { $('#num_results').html(total); }, - hideOnInit: true - }); - +```javascript +$('#search_input').fastLiveFilter('#search_list', { + timeout: 200, + hideOnInit: true, + hideIfEmpty: true, + callback: function(total) { $('#num_results').html(total); } +}); +``` Problems? Want to contribute? -----------------------------