Preserve original width option. Adjust width of the suggestions container each time if width is set to 'auto'.

Author: Tomas Kirda

demo.htm

@@ -29,6 +29,14 @@ <h2>Custom Lookup Container</h2>
             <div id="suggestions-container" style="position: relative; float: left; width: 400px; margin: 10px;"></div>
         </div>
     </div>
+    
+    <div style="width: 50%; margin: 0 auto; clear: both;">
+        <h2>Dynamic Width</h2>
+        <p>Type country name in english:</p>
+        <div>
+            <input type="text" name="country" id="autocomplete-dynamic" style="width: 100%; border-width: 5px;"/>
+        </div>
+    </div>
 
     <script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>
     <script type="text/javascript" src="scripts/jquery.mockjax.js"></script>

scripts/demo.js

@@ -53,6 +53,11 @@ $(function () {
             lookup: countriesArray,
             appendTo: '#suggestions-container'
         });
+
+        // Initialize autocomplete with custom appendTo:
+        $('#autocomplete-dynamic').autocomplete({
+            lookup: countriesArray
+        });
 
     });
 

spec/autocompleteBehavior.js

@@ -132,7 +132,7 @@ describe('Autocomplete', function () {
         });
     });
 
-    it('Should execute onSearchCompleted', function () {
+    it('Should execute onSearchComplete', function () {
         var input = document.createElement('input'),
             completeQuery,
             ajaxExecuted = false,
@@ -421,4 +421,21 @@ describe('Autocomplete', function () {
             expect(data).toBeFalsy();
         });
     });
+
+    it('Should set width to be greater than zero', function () {
+        var input = $(document.createElement('input')),
+            instance,
+            width;
+
+        input.autocomplete({
+            lookup: [{ value: 'Jamaica', data: 'B' }]
+        });
+
+        input.val('Jam');
+        instance = input.autocomplete();
+        instance.onValueChange();
+        width = $(instance.suggestionsContainer).width();
+
+        expect(width).toBeGreaterThan(0);
+    });
 });

spec/runner.html

@@ -10,6 +10,9 @@
         <!-- jQuery -->
         <script src="../scripts/jquery-1.8.2.min.js"></script>
         <script src="../scripts/jquery.mockjax.js"></script>
+        <script type="text/javascript">
+            window.JSON || document.write('<scr' + 'ipt src="//cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.min.js"><\/scr' + 'ipt>');
+        </script>
 
         <!-- Autocomplete -->
         <script src="../src/jquery.autocomplete.js"></script>

src/jquery.autocomplete.js

@@ -138,16 +138,16 @@
                 }
             };
 
-            // Determine suggestions width:
-            if (!options.width || options.width === 'auto') {
-                options.width = that.el.outerWidth();
-            }
-
             that.suggestionsContainer = Autocomplete.utils.createNode('<div class="' + options.containerClass + '" style="position: absolute; display: none;"></div>');
 
             container = $(that.suggestionsContainer);
 
-            container.appendTo(options.appendTo).width(options.width);
+            container.appendTo(options.appendTo);
+            
+            // Only set width if it was provided:
+            if (options.width !== 'auto') {
+                container.width(options.width);
+            }
 
             // Listen for mouse over event on suggestions list:
             container.on('mouseover.autocomplete', suggestionSelector, function () {
@@ -441,13 +441,23 @@
                 className = that.classes.suggestion,
                 classSelected = that.classes.selected,
                 container = $(that.suggestionsContainer),
-                html = '';
+                html = '',
+                width;
 
             // Build suggestions inner HTML:
             $.each(that.suggestions, function (i, suggestion) {
                 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 (that.options.width === 'auto') {
+                width = that.el.outerWidth() - 2;
+                container.width(width > 0  ? width : 300);
+            }
+
             container.html(html).show();
             that.visible = true;