Getting Spry's Auto Suggest Widget to Hover in IE

Yesterday Dan Vega posted an entry about an issue he was seeing with Spry Auto Suggest widget in IE 6. Well it turns out I was investigating the Spry Auto Suggest widget just last week because I needed the cause of this bug. Let me explain.

I was trying to use ColdFusion 8's built in auto suggest features on a larger form which had a select form element just below the auto suggest text element. The results were not so pretty on IE 6:

Notice how the select box is showing through the suggestion list. It turns out if you want to hover anything over an IE windowed control (select box, Active X component, etc.) you have to use what is know sometimes called the iframe hack. CF 8's built in auto suggest obviously wasn't using this hack so I decided to check out Spry. I was happy to see that, according to the Spry Change Log, the IE iframe hack was added to the Auto Suggest widget in Spry 1.6. So I set out to give it a try.

Using the widget straight out of the box and code based on the Spry Auto Suggest Overview I wasn't getting the best results.

Here is the code. (I'm using a table layout because this is what I have in the application I'm working on.):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>
<head>
<title>Test Auto Suggest</title>
<script language="JavaScript" type="text/javascript" src="/Spry_P1_6_10-01/includes_minified/xpath.js"></script>
<script language="JavaScript" type="text/javascript" src="/Spry_P1_6_10-01/includes_minified/SpryData.js"></script>
<script language="JavaScript" type="text/javascript" src="/Spry_P1_6_10-01/includes_minified/SpryAutoSuggest.js"></script>
<link href="/Spry_P1_6_10-01/widgets/autosuggest/SpryAutoSuggest.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript">
var dsCities = new Spry.Data.XMLDataSet("cities.xml","cities/city");
</script>
</head>
<body>
<form action="index.cfm" method="post">
<table>
<tr>
<td>
City:
</td>
<td>
<div id="cityDiv" class="container">
<input type="text" id="cityFilter" name="city"/>
<div id="cityMenuDiv" spry:region="dsCities">
<span spry:repeat="dsCities" spry:suggest="{city}">{city}<br /></span>
</div>
</div>
<script type="text/javascript">
var as = new Spry.Widget.AutoSuggest("cityDiv", "cityMenuDiv", "dsCities", "city");
</script>
</td>
</tr>
<tr>
<td>
State:
</td>
<td>
<div id="sampleSelectBoxDiv" class="container">
<select name="sampleSelectBox">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>

And the result in IE:

before displaying suggestions:

after displaying suggestions:

I wasn't having the hiding issue, but anytime the auto suggest options were displayed the contents below my form were shifted down. What I really wanted was to have the auto suggest options float over the content below the text input element. To get this to work correctly I had to add a style attribute to the suggestion div that made it's position absolute.

<div id="cityDiv" class="container">
<input type="text" id="cityFilter" name="city"/><br/>
<div id="cityMenuDiv" spry:region="dsCities" style="position:absolute;">
<span spry:repeat="dsCities" spry:suggest="{city}">{city}<br /></span>
</div>
</div>

After making this adjustment things were getting close, but I still had the issue Dan described: I couldn't click on the suggestions in IE. Turns out the reason is because the iframe being used to hide windowed controls was at a higher z-index than the suggestion div. Thus every time I moved my mouse over the suggestions the iframe was gaining focus, not the suggestion div. The fix, as Dan described, was to adjust the z-index of the suggestion div in the SpryAutoSuggest.css stylesheet so that is was above the iframe. Once that was done I finally had an auto suggest widget that worked well in IE 6. (Now if I could only get my company off of IE 6 I wouldn't need to worry about these crazy hacks...)

Comments
Dan's Gravatar I really wish the business world did not resolve around IE so much. It so much of a pain to get things working how they should and then have to figure out how to hack it so the IE6 world can play along. Glad the tip helped, it was 1 that was bugging me for weeks.
# Posted By Dan | 12/14/07 9:38 AM
Martin's Gravatar Your issue with IE6 and the select lists is a well known pain in IE.

Since this bug, is only the tip of the iceberg for IE, I would suggest a site that will help you with these issues in future (since there are so many)

http://webbugtrack.blogspot.com/

It will track issues in all browsers, but most are obviously in IE only.

Best of luck
# Posted By Martin | 12/14/07 3:38 PM
Parthasarathy's Gravatar Thanks! Fine Answer, first i tried adding the same to .show / .hide, but that doesn't work.
# Posted By Parthasarathy | 8/25/09 2:21 AM
BlogCFC was created by Raymond Camden. This blog is running version 5.8.001.