Added an optional no-suggestions notice when no matching results

This feature aims to improve user experience and plugin's responsiveness
by providing instant feedback for empty searches.

Author: Polo

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; }
 

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:
 

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:

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')        
+    });
+
 });

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 += '<div class="' + className + '" data-index="' + i + '">' + formatResult(suggestion, value) + '</div>';
             });
 
-            // If width is auto, adjust width before displaying suggestions,
-            // because if instance was created before input had width, it will be zero.
-            // Also it adjusts if input width has changed.
-            // -2px to account for suggestions border.
-            if (options.width === 'auto') {
-                width = that.el.outerWidth() - 2;
-                container.width(width > 0 ? width : 300);
-            }
+            this.adjustContainerWidth();      
 
             container.html(html);
 
@@ -600,6 +595,36 @@
             that.findBestHint();
         },
 
+        noSuggestions: function() {
+             var that = this,
+                 container = $(that.suggestionsContainer),               
+                 html = '',
+                 width;   
+         
+            html += '<div class="autocomplete-no-suggestion">' + this.options.noSuggestionNotice + '</div>';        
+
+            this.adjustContainerWidth();
+            container.html(html);
+            container.show();
+            that.visible = true;
+        },
+
+        adjustContainerWidth: function() {
+            var that = this,
+                options = that.options,
+                width,
+                container = $(that.suggestionsContainer)
+
+            // If width is auto, adjust width before displaying suggestions,
+            // because if instance was created before input had width, it will be zero.
+            // Also it adjusts if input width has changed.
+            // -2px to account for suggestions border.
+            if (options.width === 'auto') {
+                width = that.el.outerWidth() - 2;
+                container.width(width > 0 ? width : 300);
+            }
+        },
+
         findBestHint: function () {
             var that = this,
                 value = that.el.val().toLowerCase(),