From d950fa9e4e9feacfd81e7746da0b8524af77c521 Mon Sep 17 00:00:00 2001 From: Hidenari Nozaki Date: Thu, 26 Mar 2015 23:50:28 +1300 Subject: [PATCH 1/3] Implement show all results when minlength is 0. #107 --- angucomplete-alt.js | 19 ++++++++++- test/angucomplete-alt.spec.js | 63 +++++++++++++++++++++++++++++++++++ 2 files changed, 81 insertions(+), 1 deletion(-) diff --git a/angucomplete-alt.js b/angucomplete-alt.js index 81cd92a1..2e9330ca 100644 --- a/angucomplete-alt.js +++ b/angucomplete-alt.js @@ -546,10 +546,23 @@ } } + function showAll() { + if (scope.localData) { + processResults(scope.localData, ''); + } + else { + getRemoteResults(''); + } + } + scope.onFocusHandler = function() { if (scope.focusIn) { scope.focusIn(); } + if (minlength === 0 && (!scope.searchStr || scope.searchStr.length === 0)) { + scope.showDropdown = true; + showAll(); + } }; scope.hideResults = function(event) { @@ -610,6 +623,10 @@ if (str.length < minlength) { clearResults(); } + else if (minlength === 0) { + showAll(); + } + if (scope.inputChanged) { str = scope.inputChanged(str); } @@ -623,7 +640,7 @@ // check min length if (scope.minlength && scope.minlength !== '') { - minlength = scope.minlength; + minlength = parseInt(scope.minlength, 10); } // check pause time diff --git a/test/angucomplete-alt.spec.js b/test/angucomplete-alt.spec.js index 9e0cce23..82c7f15f 100644 --- a/test/angucomplete-alt.spec.js +++ b/test/angucomplete-alt.spec.js @@ -1369,4 +1369,67 @@ describe('angucomplete-alt', function() { expect(inputField.val()).toEqual('e'); }); }); + + describe('set minlenght to 0', function() { + it('should show all items when focused', function() { + var element = angular.element('
'); + $scope.countrySelected = null; + $scope.countries = [ + {name: 'Afghanistan', code: 'AF'}, + {name: 'Aland Islands', code: 'AX'}, + {name: 'Albania', code: 'AL'} + ]; + $compile(element)($scope); + $scope.$digest(); + + var inputField = element.find('#ex1_value'); + expect(element.find('.angucomplete-row').length).toBe(0); + // TODO: should replace all triggers with this triggerHandler + // http://sravi-kiran.blogspot.co.nz/2013/12/TriggeringEventsInAngularJsDirectiveTests.html + inputField.triggerHandler('focus'); + $scope.$digest(); + expect(element.find('.angucomplete-row').length).toBe(3); + }); + + it('should remove highlight when input becomes empty', function() { + var element = angular.element('
'); + $scope.countrySelected = null; + $scope.countries = [ + {name: 'Afghanistan', code: 'AF'}, + {name: 'Aland Islands', code: 'AX'}, + {name: 'Albania', code: 'AL'} + ]; + $compile(element)($scope); + $scope.$digest(); + + var inputField = element.find('#ex1_value'); + inputField.triggerHandler('focus'); + $scope.$digest(); + expect(element.find('.angucomplete-row').length).toBe(3); + element.find('.angucomplete-row .highlight').each(function() { + expect($(this).text().length).toBe(0); + }); + + var eKeyup = $.Event('keyup'); + eKeyup.which = 97; // letter: a + + inputField.val('a'); + inputField.triggerHandler('input'); + inputField.trigger(eKeyup); + $timeout.flush(); + element.find('.angucomplete-row .highlight').each(function() { + expect($(this).text().length).toBeGreaterThan(0); + }); + + eKeyup.which = KEY_DEL; + inputField.val(''); + inputField.triggerHandler('input'); + inputField.trigger(eKeyup); + $scope.$digest(); + element.find('.angucomplete-row .highlight').each(function() { + expect($(this).text().length).toBe(0); + }); + expect(element.find('.angucomplete-row').length).toBe(3); + }); + }); }); From 1f607fda78bf6cc4499c4e0125e3d19feafd79b6 Mon Sep 17 00:00:00 2001 From: Hidenari Nozaki Date: Mon, 30 Mar 2015 21:36:00 +1300 Subject: [PATCH 2/3] Fix showing all items lot more than necessary --- angucomplete-alt.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/angucomplete-alt.js b/angucomplete-alt.js index 2e9330ca..6dc62567 100644 --- a/angucomplete-alt.js +++ b/angucomplete-alt.js @@ -623,7 +623,7 @@ if (str.length < minlength) { clearResults(); } - else if (minlength === 0) { + else if (str.length === 0 && minlength === 0) { showAll(); } From ec92abd67c6bcf1c9f5ab2df7d708ec14e7e1c07 Mon Sep 17 00:00:00 2001 From: Hidenari Nozaki Date: Tue, 31 Mar 2015 06:14:50 +1300 Subject: [PATCH 3/3] Update readme --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index dfd0c609..b7399488 100644 --- a/README.md +++ b/README.md @@ -37,6 +37,7 @@ To see a demo go here: http://ghiden.github.io/angucomplete-alt * Show scrollbar. See [example #1](http://ghiden.github.io/angucomplete-alt/#example1) * Clear input by sending $broadcast from parent scope. Thanks to @Leocrest for #61. * Override template with your own. When you use this feature, test throughly as it might break other features. Thanks to @sdbondi for #74. +* Show all items. ### Getting Started Download the package, and include the dist/angucomplete-alt.min.js file in your page. @@ -99,7 +100,7 @@ var app = angular.module('app', ["angucomplete-alt"]); | title-field | The name of the field in the JSON objects returned back that should be used for displaying the title in the autocomplete list. Note, if you want to combine fields together, you can comma separate them here (e.g. for a first and last name combined). If you want to access nested field, use dot to connect attributes (e.g. name.first). [example](http://ghiden.github.io/angucomplete-alt/#example1) | Yes | firstName,lastName | | description-field | The name of the field in the JSON objects returned back that should be used for displaying the description in the autocomplete list. [example](http://ghiden.github.io/angucomplete-alt/#example6) | No | twitterUsername | | image-field | The name of the field in the JSON objects returned back that should be used for displaying an image in the autocomplete list. [example](http://ghiden.github.io/angucomplete-alt/#example2) | No | pic | -| minlength | The minimum length of string required before searching. [example](http://ghiden.github.io/angucomplete-alt/#example1) | No | 3 | +| minlength | The minimum length of string required before searching. [example](http://ghiden.github.io/angucomplete-alt/#example1). If set to 0, it shows all items. It works both local and remote but is intended to use with local data. If used with remote API, it needs to return all items when query parameter is empty string. | No | 3 | | input-class | The classes to use for styling the input box. [example](http://ghiden.github.io/angucomplete-alt/#example1) | No | form-control | | match-class | If it is assigned, matching part of title is highlighted with given class style. [example](http://ghiden.github.io/angucomplete-alt/#example6) | No | highlight | | local-data | The local data variable to use from your controller. Should be an array of objects. [example](http://ghiden.github.io/angucomplete-alt/#example1) | No | countriesList |