From 7c2121a59837c26c55abeb396c8f4740e8dace45 Mon Sep 17 00:00:00 2001
From: Tomas Kirda <tomas@devbridge.com>
Date: Fri, 26 Apr 2013 14:49:41 -0500
Subject: [PATCH] Preserve original width option. Adjust width of the
 suggestions container each time if width is set to 'auto'.

---
 demo.htm                     |  8 ++++++++
 scripts/demo.js              |  5 +++++
 spec/autocompleteBehavior.js | 19 ++++++++++++++++++-
 spec/runner.html             |  3 +++
 src/jquery.autocomplete.js   | 24 +++++++++++++++++-------
 5 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/demo.htm b/demo.htm
index 9959552..bf75879 100644
--- a/demo.htm
+++ b/demo.htm
@@ -29,6 +29,14 @@
             <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>
diff --git a/scripts/demo.js b/scripts/demo.js
index 8b7ed5f..8c0cacd 100644
--- a/scripts/demo.js
+++ b/scripts/demo.js
@@ -53,6 +53,11 @@ $(function () {
             lookup: countriesArray,
             appendTo: '#suggestions-container'
         });
+
+        // Initialize autocomplete with custom appendTo:
+        $('#autocomplete-dynamic').autocomplete({
+            lookup: countriesArray
+        });
         
     });
 
diff --git a/spec/autocompleteBehavior.js b/spec/autocompleteBehavior.js
index 64822ca..1a51bad 100644
--- a/spec/autocompleteBehavior.js
+++ b/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);
+    });
 });
\ No newline at end of file
diff --git a/spec/runner.html b/spec/runner.html
index dd6f91b..549a9fd 100644
--- a/spec/runner.html
+++ b/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>
diff --git a/src/jquery.autocomplete.js b/src/jquery.autocomplete.js
index 85556a7..7698e2e 100644
--- a/src/jquery.autocomplete.js
+++ b/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;