Skip to main content
April 24, 2008
Answered

autosuggest problems with cf8

  • April 24, 2008
  • 1 reply
  • 1400 views
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>
This topic has been closed for replies.
Correct answer
Thanks very much for your help, that has fixed it. cfeclipse needs updating to accept the maxResultsDisplayed option.

1 reply

Inspiring
April 24, 2008
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.
Correct answer
April 24, 2008
Thanks very much for your help, that has fixed it. cfeclipse needs updating to accept the maxResultsDisplayed option.