noSuggestions support extended to text, htmlString, Element and jQuery.

readme.md

@@ -42,10 +42,10 @@ The standard jquery.autocomplete.js file is around 2.7KB when minified via Closu
         * `paramName`: Default `query`. The name of the request parameter that contains the query.
         * `transformResult`: `function(response, originalQuery) {}` called after the result of the query is ready. Converts the result into response.suggestions format.
         * `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.
+        * `appendTo`: container where suggestions will be appended. Default value `document.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.
+        * `noSuggestionNotice`: Default `No results`. Text or htmlString or Element or jQuery object for no matching results label.
         * `forceFixPosition`: Default: `false`. Suggestions are automatically positioned when their container is appended to body (look at `appendTo` option), in other cases suggestions are rendered but no positioning is applied.
            Set this option to force auto positioning in other cases.
         * `orientation`: Default `bottom`. Vertical orientation of the displayed suggestions, available values are `auto`, `top`, `bottom`.

src/jquery.autocomplete.js

@@ -54,7 +54,7 @@
             that = this,
             defaults = {
                 autoSelectFirst: false,
-                appendTo: 'body',
+                appendTo: document.body,
                 serviceUrl: null,
                 lookup: null,
                 onSelect: null,
@@ -103,6 +103,7 @@
         that.onChange = null;
         that.isLocal = false;
         that.suggestionsContainer = null;
+        that.noSuggestionsContainer = null;
         that.options = $.extend({}, defaults, options);
         that.classes = {
             selected: 'autocomplete-selected',
@@ -136,7 +137,8 @@
                 suggestionSelector = '.' + that.classes.suggestion,
                 selected = that.classes.selected,
                 options = that.options,
-                container;
+                container,
+                noSuggestionsContainer;
 
             // Remove autocomplete attribute to prevent native suggestions:
             that.element.setAttribute('autocomplete', 'off');
@@ -148,6 +150,10 @@
                 }
             };
 
+            // html() deals with many types: htmlString or Element or Array or jQuery
+            that.noSuggestionsContainer = $('<div class="autocomplete-no-suggestion"></div>')
+                                          .html(this.options.noSuggestionNotice).get(0);
+
             that.suggestionsContainer = Autocomplete.utils.createNode(options.containerClass);
 
             container = $(that.suggestionsContainer);
@@ -249,10 +255,11 @@
         },
 
         fixPosition: function () {
+            // Use only when container has already its content
+
             var that = this,
                 $container = $(that.suggestionsContainer),
                 containerParent = $container.parent().get(0);
-
             // Fix position automatically when appended to body.
             // In other cases force parameter must be given.
             if (containerParent !== document.body && !that.options.forceFixPosition)
@@ -594,6 +601,7 @@
                 className = that.classes.suggestion,
                 classSelected = that.classes.selected,
                 container = $(that.suggestionsContainer),
+                noSuggestionsContainer = $(that.noSuggestionsContainer),
                 beforeRender = options.beforeRender,
                 html = '',
                 index,
@@ -614,6 +622,7 @@
 
             this.adjustContainerWidth();      
 
+            noSuggestionsContainer.detach();
             container.html(html);
 
             // Select first value by default:
@@ -637,13 +646,15 @@
         noSuggestions: function() {
              var that = this,
                  container = $(that.suggestionsContainer),
-                 html = '',
+                 noSuggestionsContainer = $(that.noSuggestionsContainer);
-                 width;   
-
-            html += '<div class="autocomplete-no-suggestion">' + this.options.noSuggestionNotice + '</div>';        
 
             this.adjustContainerWidth();
-            container.html(html);
+
+            // Some explicit steps. Be careful here as it easy to get
+            // noSuggestionsContainer removed from DOM if not detached properly.
+            noSuggestionsContainer.detach();
+            container.empty(); // clean suggestions if any
+            container.append(noSuggestionsContainer);
 
             that.fixPosition();
 
@@ -655,7 +666,7 @@
             var that = this,
                 options = that.options,
                 width,
-                container = $(that.suggestionsContainer)
+                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.