ColdFusion 8 auto-suggest shows through other form fields
I was creating a form the other day that had 3 form fields, layed out vertically on top of one another. I switched the first field to be a cfinput, so I could use the autosuggest feature:
Then I switched the other two fields to be cfinputs so I could add autosuggest to them, too. And that is where I ran into problems:
This happens in IE 6 and 7, but not FireFox. The problem occurs because when ColdFusion creates the <input> tag from a <cfinput>, it wraps it in two divs with a bit of related CSS. There is a conflict with the way ColdFusion sets the CSS float and z-index properties.
Thanks to my co-worker, CSS guru Jake Churchill, for figuring out a solution. All that needs to be done is to re-layer the inputs by setting their zindex. ColdFusion names the surrounding divs in an consistent way (thankfully they don’t use random names like some of the other ColdFusion JavaScript functions!), so we can just add a little CSS of our own to fix the problem. The divs end up named like myformfield1autosuggest, myformfield2autosuggest, etc. Knowing that, we can place this into our html page:
<style type="text/css">
#field1autosuggest {
z-index:3;
}
#field2autosuggest {
z-index:2;
}
#test3autosuggest {
z-index:1;
}
</style>Even better, here is a JavaScript script file you can reference in your page that will automatically fix these issues (thanks Jake!).
Download here (note: due to formatting issues that may occur on this page, you really should download the script using this link, instead of copying and pasting from this page)
The script contents:
function fixAutoSuggest() {
divs = document.getElementsByTagName("div");
s = "<style type="text/css">\n";
counter = 1;
for (x = divs.length-1; x >= 0; x--) {
if ( divs[x].getAttribute("id") && divs[x].getAttribute("id").indexOf("autosuggest") > -1) {
s += "#"+divs[x].getAttribute("id")+" {z-index:"+(counter++)+"!important;}\n";
}
}
s += "</style>";
document.write(s);
};You must then call this function after your form elements have been written to the browser. So - after your closing form tag, put this:
<script type="text/javascript">fixAutoSuggest();</script>
It does not work to simply call the function in the body’s onload attribute.
January 30th, 2008 at 6:16 pm
Thats Awesome.
January 30th, 2008 at 9:17 pm
I used ColdFusion’s native Autosuggest for a bit but found jQuery to be much easier and extensible. Its a small footprint and the autosuggest plugin I used is based on ColdFusion examples. Even if you don’t use it, I think its worth a look:
http://www.pengoworks.com/workshop/jquery/autocomplete.htm
January 31st, 2008 at 3:28 am
Great fix guys!
Any chance you could look at the same thing that happens when you set the type to “datefield”?
The popup calendar that is generated bleeds all over the other input and select form fields. I’ve tried your technique but either it doesn’t work or I’m too dumb. I’m betting on the latter
January 31st, 2008 at 9:19 am
We did spend a little time looking at the datefield, and its not an easy fix. For some reason they are writing the style for the date stuff inline, instead of using a class or ID selector.
I’m really surprised Adobe overlooked this issue. Maybe they didn’t do any testing with more than one cfinput on a page?
January 31st, 2008 at 10:56 am
The issue was documented in the CF 8 release notes. Thanks for the fix.
July 8th, 2008 at 11:02 am
I tried using this but the above code would cause a JS error in FF which would in turn break everything else.
The problem was with the line:
s = "\n";
I had to change it to:
s = '\n';
Thanks for a great fix!
July 8th, 2008 at 11:03 am
Well that didn’t work very well.
The line in the JS that starts with s = ” i had to replace the outer ” with ‘
July 15th, 2008 at 2:49 pm
Say, using autosuggest is there a way to populate 2 hidden form fields with different column values based on what is selected in the autosuggest?
August 29th, 2008 at 3:53 pm
I have read alot about jquery autosuggest, but I was spending way too many hours trying to make it work. Coldfusion 8 autosuggest is fast and quick, but I ran into the problem you described in your blog.
You are a real lifesaver. It was the solution to the problem. Thanks for taking the time to blog about the solution to this problem.
November 7th, 2008 at 11:07 am
In order to get it to work in IE, I had to change all instances of \\n to \n. Otherwise, good stuff, thanks!
November 7th, 2008 at 11:14 am
Thanks Mike, I don’t know how those double slashes got in there but I removed them.
Just an FYI, people may have better luck using the script if they get it from the download link mentioned, rather than copying and pasting from this page.
November 7th, 2008 at 6:17 pm
For those interested in a solution for the datefield problem, I found a solution that works for me here: http://www.easycfm.com/forums/printthread.cfm?Forum=12&Topic=13172
November 7th, 2008 at 6:24 pm
Sorry, I should add that I didn’t implement my fix just as described, but I did set the z-index to 9999 in my top date field inside the DIV, as he showed. My lower datefield, I set to 8888.
December 10th, 2008 at 3:49 pm
Great fix for IE7, FF & Safari with datefield and autosuggest… didn’t have any luck with IE6 using an autosuggest above a tag. The select tag shows thru the dropdown autosuggest list. (Changing to cfselect didn’t help either.) Any thoughts?
June 11th, 2009 at 4:44 am
I have a slightly different issue. I tried to use autosuggest in my site header - div = header and it would not work. The Ajax debugger showed that I obtained the results I was looking for but they would not show through the autosuggest box. It appears that the autosuggest box is scrunched. I even tried this with a web page with no styling attached to the header div. I then change the div id to anything else and I could see the results of the autosuggest control. The easy answer is to move the placement of the autosuggest control. But, I want to use the autosuggest at the top of my page to search through my site. Do you have any ideas for this problem?
Thanks,
Bud
June 11th, 2009 at 5:51 am
Never mind on my question above. It turns out that I had a header ul with a position of absolute that was preventing the autosuggest results from displaying.