Currently I’m trying to modify OOTB code for a search box.
After a search term has been typed in, the users picks a match which opens in a new window, then they close the new window, and try to back space over the typed term, there is a white bar that remains below the text entry box.
For example, if the word bathroom is typed in the text box, a list of possible matching topics is displayed. You pick the option to Where is the bathroom?. This opens a new window/tab - just close the tab. The original search box still displays the term bathroom, but if you backspace to remove the term, then a white bar remains below the text entry box.
How do I get rid of the white bar when the text entry box is empty?
The code being used is shown below - attachment shows the problem as it appears in IE and FF:
A temporary page with the search box.
<style type="text/css">
/* autosuggest css */
/* the look of the overlay div with results */
#la_results {
border: 1px solid #bbb;
border-color: #bbb #6f6f6f #6f6f6f #bbb;
border-top: 0;
-moz-box-shadow: 3px 3px 8px #444;
-webkit-box-shadow: 3px 3px 8px #444;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
background: #fff;
}
/*the two divs below control the look and feel of individual results, which show up as LI elements in the overlay div */
#la_results ul { list-style-type: none; margin:0; padding:0; font:normal 11px Geneva, Arial, Helvetica, sans-serif;}
#la_results ul li a { display: block; text-decoration:none; padding:3px }
.itemwhite { background-color:#fff;} /* the color of the "white" stripe in the results div */
.itemcol { background-color:#efefef;} /* the color of the "color" stripe in the results div */
#la_results li a:hover { background-color: #f8bb49;} /*the color of the hover effect when the user goes thru the results */
/* the class below controls the font and the look of the "more search/full text search stripe */
.itemsrch {color:#cc3333;font:bold 11px Geneva, Arial, Helvetica, sans-serif; background-color:#FFFFCC;}
.nwylf { color:#900;} /* "not what you are looking for?" text color */
</style>
<!-- start of LA widget -->
<div id="la_wrapper" style="width:500px;background-color:#F3f3f3;margin:0;padding:6px;border: solid 1px #a9cee7;">
<p>Type a question:</p>
<input type="text" id="la_suggest" style="display:block; margin-top: 6px; width: 100%; height: 24px; font-size: 14px" onFocus="document.getElementById('la_results')[removed]=''" onKeyUp="if (this.value) {laFQM(this.value)} else {document.getElementById('la_results')[removed]=''}" value="" >
<div id="la_results" style="padding-top: 2px; font-family: Helvetica, Arial, sans-serif; font-size:11px; position:absolute; margin-top:0px; width:500px; border: solid 1px #ccc;display:none"></div>
</div>
Then code goes on with [removed]
var lahilite=“efefef”; var lanw=1;
I’m not sure if this is best addressed within the CSS or JavaScript.
Thanks much.