View Full Version : OOTB search code displays extraneous white bar

11-18-2010, 06:30 PM
Currently I'm trying to modify OOTB code for a search box.

I'm not sure if this is best addressed within the JavaScript or CSS.

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 (http://howardcc.libguides.com/sb) 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 */

<!-- 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>

<script language="javascript">var lahilite="efefef"; var lanw=1;</script>
<script language="javascript" src="http://api.libanswers.com/api/ladata-32.js"></script>

Thanks much.

Old Pedant
11-18-2010, 08:36 PM
Might want to try to help you, but that JS code is purposely written to be as obscure as possible. Since this only happens with MSIE, and since the dropdown looks much uglier in MSIE, anyway, your IE users may just have to live with it. It's a little disappointing that the list of questions is so small and is prepopulated into the JS code. I would have thought you'd use a database and search it, via AJAX code, instead.