diff --git a/content/styles.css b/content/styles.css index f3da7b4..97c18d4 100644 --- a/content/styles.css +++ b/content/styles.css @@ -3,6 +3,7 @@ .autocomplete-suggestions { border: 1px solid #999; background: #FFF; cursor: default; overflow: auto; -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); } .autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; } +.autocomplete-no-suggestion { padding: 2px 5px;} .autocomplete-selected { background: #F0F0F0; } .autocomplete-suggestions strong { font-weight: normal; color: #3399FF; } diff --git a/readme.md b/readme.md index 2f114b9..9f85942 100644 --- a/readme.md +++ b/readme.md @@ -44,6 +44,8 @@ The standard jquery.autocomplete.js file is around 2.7KB when minified via Closu * `autoSelectFirst`: if set to `true`, first item will be selected when showing suggestions. Default value `false`. * `appendTo`: container where suggestions will be appended. Default value `body`. Can be jQuery object, selector or html element. Make sure to set `position: absolute` or `position: relative` for that element. * `dataType`: type of data returned from server. Either 'text' (default) or 'jsonp', which will cause the autocomplete to use jsonp. You may return a json object in your callback when using jsonp. + * `showNoSuggestionNotice`: Default `false`. When no matching results, display a notification label. + * `noSuggestionNotice`: Default `No results`. Text for no matching results label. Autocomplete instance has following methods: diff --git a/scripts/demo.js b/scripts/demo.js index fa78f4f..ab887b8 100644 --- a/scripts/demo.js +++ b/scripts/demo.js @@ -52,7 +52,9 @@ $(function () { minChars: 0, onSelect: function (suggestion) { $('#selection').html('You selected: ' + suggestion.value + ', ' + suggestion.data); - } + }, + showNoSuggestionNotice: true, + noSuggestionNotice: 'Sorry, no matching results', }); // Initialize autocomplete with custom appendTo: diff --git a/spec/autocompleteBehavior.js b/spec/autocompleteBehavior.js index 80718cf..77e5611 100644 --- a/spec/autocompleteBehavior.js +++ b/spec/autocompleteBehavior.js @@ -654,4 +654,24 @@ describe('Autocomplete', function () { expect(ajaxCount).toBe(2); }); }); + + it('Should display no suggestion notice when no matching results', function () { + var input = document.createElement('input'), + options = { + lookup: [{ value: 'Colombia', data: 'Spain' }], + showNoSuggestionNotice: true, + noSuggestionNotice: 'Sorry, no matching results' + }, + autocomplete = new $.Autocomplete(input, options), + suggestionsContainer = $(autocomplete.suggestionsContainer) + + input.value = 'Jamaica'; + autocomplete.onValueChange(); + + expect(autocomplete.visible).toBe(true); + expect(autocomplete.selectedIndex).toBe(-1) + expect(suggestionsContainer.find('.autocomplete-no-suggestion').length).toBe(1) + expect(suggestionsContainer.find('.autocomplete-no-suggestion').text()).toBe('Sorry, no matching results') + }); + }); diff --git a/src/jquery.autocomplete.js b/src/jquery.autocomplete.js index 6988bf5..fa223af 100644 --- a/src/jquery.autocomplete.js +++ b/src/jquery.autocomplete.js @@ -83,7 +83,9 @@ paramName: 'query', transformResult: function (response) { return typeof response === 'string' ? $.parseJSON(response) : response; - } + }, + showNoSuggestionNotice: false, + noSuggestionNotice: 'No results' }; // Shared variables: @@ -544,7 +546,7 @@ suggest: function () { if (this.suggestions.length === 0) { - this.hide(); + this.options.showNoSuggestionNotice ? this.noSuggestions() : this.hide(); return; } @@ -573,14 +575,7 @@ html += '