Re-use the auto suggestion box and make sure it's not overlapped

diff --git a/data/autosuggestcontrol.css b/data/autosuggestcontrol.css
index a7ca89d224a9aa218e410ecfa30e21d21480bc91..db1b1006d29a8cd33e68076e7e97cc505f1ef59c 100644 (file)
--- a/data/autosuggestcontrol.css
+++ b/data/autosuggestcontrol.css
@@ -5,6 +5,7 @@ div.suggestions {
     text-align: left;
     background-color: #ffffff;
     position: absolute;
+    z-index: 999;
 }
 div.suggestions div {
     cursor: default;

diff --git a/data/autosuggestcontrol.js b/data/autosuggestcontrol.js
index 83afeb9156b0059e7cd80b7c2e10e9ff032e6e72..fc82cbf156a46e63c80a0e30a17221c69a3f89c6 100644 (file)
--- a/data/autosuggestcontrol.js
+++ b/data/autosuggestcontrol.js
@@ -53,12 +53,18 @@ AutoSuggestControl.prototype.autosuggest = function (aSuggestions /*:Array*/) {
 AutoSuggestControl.prototype.createDropDown = function () {
     var oThis = this;
 
-    //create the layer and assign styles
-    this.layer = document.createElement("div");
-    this.layer.className = "suggestions";
-    this.layer.style.visibility = "hidden";
-    this.layer.style.width = this.textbox.offsetWidth;
+    var sDiv = document.getElementById("suggestions_box");
 
+    if (sDiv)
+        this.layer = sDiv;
+    else
+    {
+        this.layer = document.createElement("div");
+        this.layer.className = "suggestions";
+        this.layer.id = "suggestions_box";
+        this.layer.style.visibility = "hidden";
+        this.layer.style.width = this.textbox.offsetWidth;
+    }
     this.layer.onmousedown =
     this.layer.onmouseup =
     this.layer.onmouseover = function (oEvent) {
@@ -275,6 +281,7 @@ AutoSuggestControl.prototype.showSuggestions = function (aSuggestions /*:Array*/
     this.layer.style.left = this.getLeft() + "px";
     this.layer.style.top = (this.getTop()+this.textbox.offsetHeight) + "px";
     this.layer.style.visibility = "visible";
+    this.layer.style.position = "absolute";
 };
 
 /**