autosuggest problems with cf8

[johnbraduk]

I am using cfinput with autosuggest as described ny Ben Forta in his cf8 book.
I have the following questions.
How do you get more than 10 items to be displayed in the list?
On my form I have a cfgrid below the cfinput/autosuggest which works ok with Firefox, but with IE the list is hidden by the cfgrid. How do I fix that?

<cfform name="EISELCLIENT1" method="POST">
<br/>
<br/>
<table width="50%" align="center"><tr><td>

<h3 align="center"> Enter first letters of Client Name</h3> </td></tr>
<tr><td><span class="fldhdr" align="center" >

<cfinput name="char1" id="char1" type="text" value="?"
autosuggest="cfc:components.clients.qryclient2({cfautosuggestvalue})" ></span>

</td></tr></table><br><br>
<br>
<table width="100%" border="0" cellpadding="0">
<tr>
<td><div id="pt1" align="center" >
<cfgrid name="clist1" format="html" selectmode="row"
striperows="yes" pagesize="10"
bind="cfc:components.clients.qryclient1({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},
{cfgridsortdirection},{char1})" >
<cfgridcolumn name="ClientCode" header="Code">
<cfgridcolumn name="Name" width="200" header="Name">
<cfgridcolumn name="PC" width="100" header="Post Code">
<cfgridcolumn name="Tel" width="100" header="Telephone">
</cfgrid>

[emccormick]

Check Livedocs. maxResultsDisplayed, autosuggestBindDelay,
autosuggestMinLength, showAutosuggestLoadingIcon and typeahead
attributes of cfinput tag in cf8.

You may need to also put the style attribute in your cfinput autosuggest form element and set the z-index higher than the surrounding elements.

Example:

<cfinput type="text"
name="partnername"
autosuggest="cfc:get_partnername.lookup({cfautosuggestvalue},{SOURCE})"
size="35"
maxResultsDisplayed = "1000"
autosuggestminlength = "2" align="left"
style="z-index:1000;"
tabindex="0">

<cfinput type="button" name="Submit" value="Go!"
onClick="javascript:ColdFusion.navigate('get_tabdata.cfm?select=org','orgsection',orgcallBack,myerrorhandler,'POST','form1');
javascript:ColdFusion.navigate('get_tabdata.cfm?select=sales','salessection',salescallBack,myerrorhandler,'POST','form1');
javascript:ColdFusion.navigate('get_tabdata.cfm?select=opps','oppssection',oppscallBack,myerrorhandler,'POST','form1');
javascript:ColdFusion.navigate('get_controls.cfm','controlsection',controlscallBack,myerrorhandler,'POST','form1');"
tabindex="1" style="position:absolute;left:0px;top:55px;z-index:-1">

Notice the z-index of the autosuggest element is 1000, and the item immediately below has a z-index of -1. In IE, this puts the autosuggest drop down on top.

[johnbraduk · Accepted solution]

Thanks very much for your help, that has fixed it. cfeclipse needs updating to accept the maxResultsDisplayed option.