Copy link to clipboard
Copied
Googled this for several hours, hope I'm missing the obvious as usual...
I'm using CF9 and IIS7. Followed/tailored simple autosuggest code from Ben Forta.
Came up with HTML:
<cfinput type="text" name="Employer" size="50" autosuggest="cfc:employer.lookupEmployer({cfautosuggestvalue})">
and a CFC named employer.cfc in the current template folder:
<cfcomponent output="false">
<cffunction name="lookupEmployer" access="remote" returntype="array">
<cfargument name="search" type="any" required="false" default="">
<cfset var data="">
<cfset var result=ArrayNew(1)>
<cfquery name="data" datasource="Binkley">
Select lname
From tdLicense
Order By lname
</cfquery>
<cfloop query="data">
<cfset ArrayAppend(result, lname)>
</cfloop>
<cfreturn result>
</cffunction>
</cfcomponent>
The query runs fine in a test cfm file.
Any help appreciated.
Copy link to clipboard
Copied
Does this work?
<cfform>
<cfinput name="fullName" type="text" autosuggest="Small, Edward H/Small, Georgia A/Small, Jennifer Leigh/Small, John Preston/Small, John William" delimiter="/">
</cfform>
Copy link to clipboard
Copied
BKBK wrote:
Does this work?
<cfform>
<cfinput name="fullName" type="text" autosuggest="Small, Edward H/Small, Georgia A/Small, Jennifer Leigh/Small, John Preston/Small, John William" delimiter="/">
</cfform>
Yes it does
Copy link to clipboard
Copied
LyndonPatton wrote:
BKBK wrote:
Does this work?
<cfform>
<cfinput name="fullName" type="text" autosuggest="Small, Edward H/Small, Georgia A/Small, Jennifer Leigh/Small, John Preston/Small, John William" delimiter="/">
</cfform>
Yes it does
I wonder if the Coldfusion CSS file is not being mapped correctly or something??? (more straw grasping...)
Copy link to clipboard
Copied
I wonder if the Coldfusion CSS file is not being mapped correctly or something??? (more straw grasping...)
Check. Are you getting any 404s on your network panel in Firebug when you a) request the page; b) trigger the autosuggest?
--
Adam
Copy link to clipboard
Copied
No, no errors since the virtual drive mapping was entered.
Copy link to clipboard
Copied
Is that <cfform> code the entirety of the code in test.cfm, or is there anything else that could be creating mark-up in there too? I'm wondering if JS is not finding the form for some reason? This is unlikely, that said.
--
Adam
Copy link to clipboard
Copied
Adam Cameron. wrote:
Is that <cfform> code the entirety of the code in test.cfm, or is there anything else that could be creating mark-up in there too? I'm wondering if JS is not finding the form for some reason? This is unlikely, that said.
--
Adam
Yes, just three lines of code in the file. I have a style sheet that loads into is but it's very simple. Here's the client source:
<script type="text/javascript">/* <![CDATA[ */_cf_loadingtexthtml="<img alt=' ' src='/CFIDE/scripts/ajax/resources/cf/images/loading.gif'/>";
_cf_contextpath=
"";_cf_ajaxscriptsrc=
"/CFIDE/scripts/ajax";_cf_jsonprefix=
'//';_cf_clientid=
'D70BBDC5A00DE45754321321B42E2355';/* ]]> */</script><script type="text/javascript" src="/CFIDE/scripts/ajax/yui/yahoo-dom-event/yahoo-dom-event.js"></script><
script type="text/javascript" src="/CFIDE/scripts/ajax/yui/animation/animation-min.js"></script
>
<
script type="text/javascript" src="/CFIDE/scripts/ajax/yui/autocomplete/autocomplete-min.js"></script
>
<
script type="text/javascript" src="/CFIDE/scripts/ajax/messages/cfmessage.js"></script
>
<
script type="text/javascript" src="/CFIDE/scripts/ajax/package/cfajax.js"></script
>
<
script type="text/javascript" src="/CFIDE/scripts/ajax/package/cfautosuggest.js"></script
>
<
link rel="stylesheet" type="text/css" href="/CFIDE/scripts/ajax/resources/yui/yui.css"
/>
<
link rel="stylesheet" type="text/css" href="/CFIDE/scripts/ajax/resources/cf/cf.css"
/>
<
script type="text/javascript" src="/CFIDE/scripts/cfform.js"></script
>
<
script type="text/javascript" src="/CFIDE/scripts/masks.js"></script
>
<
script type="text/javascript">
/* <![CDATA[ */
ColdFusion.Ajax.importTag(
'CFINPUT-AUTOSUGGEST');/* ]]> */
</script
>
<script type="text/javascript">/* <![CDATA[ */var _cf_autosuggest_init_1353084044716=function(){
var _cf_autosuggestarray=[];var _cf_autosuggestdatasource= ColdFusion.Autosuggest.initJS_ARRAY( _cf_autosuggestarray);_cf_autosuggestdatasource.queryMatchContains =
false;var _cf_autosuggest= ColdFusion.Autosuggest.init( 'Employerx','Employerxcontainer',_cf_autosuggestdatasource);_cf_autosuggest.onbinderror=
null;_cf_autosuggest.queryMatchContains =
false;_cf_autosuggest.prehighlightClassName =
"yui-ac-prehighlight";_cf_autosuggest.typeAhead =
false;_cf_autosuggest.maxResultsDisplayed = 10;
_cf_autosuggest.useShadow =
true;_cf_autosuggest.showloadingicon =
true;_cf_autosuggest.containerCollapseEvent.subscribe(ColdFusion.Autosuggest.triggerOnChange);
_cf_autosuggest.id=
'Employerx'_cf_autosuggest.valuePresent=
false_cf_autosuggest.doBeforeExpandContainer=_cf_resetLoadingIcon_1353084044717;
YAHOO.util.Event.addListener(
"Employerx","blur",_cf_resetLoadingIcon_1353084044717);ColdFusion.objectCache[
"Employerx"] = _cf_autosuggest;document.getElementById(
"Employerxcontainer").style.left = document.getElementById("Employerx").offsetLeft;YAHOO.util.Event.addListener(
"Employerx","keyup",_cf_onKeyUp_1353084044718,_cf_autosuggest);};ColdFusion.Event.registerOnLoad(_cf_autosuggest_init_1353084044716);
_cf_resetLoadingIcon_1353084044717=
function(){
document.getElementById(
"Employerx_cf_button").src='/CFIDE/scripts/ajax/resources/cf/images/static.gif';return true;};
_cf_cfcBindCall_1353084044719=
function(){
var cfautosuggestvalue=document.getElementById('Employerx').value;ColdFusion.Bind.cfcBindHandler(
null, {'bindTo':ColdFusion.Autosuggest.loadAutoSuggest,'bindToAttr':'true','cfc':'/Binkley/TrackData/NoMenu/employers.cfc','cfcFunction':'lookupEmployer','_cf_ajaxproxytoken':'49F60E098882E8918E4C8F95AB43','bindExpr':[['search',cfautosuggestvalue]], 'bindToParams': { 'autosuggestid':"Employerx" }});};_cf_onKeyUp_1353084044718=
function( arg,autosuggest){
var cfautosuggestvalue=document.getElementById('Employerx').value;ColdFusion.Autosuggest.checkToMakeBindCall(arg,
"Employerx", autosuggest, cfautosuggestvalue, _cf_cfcBindCall_1353084044719);};
/* ]]> */</script><script type="text/javascript"><!--
_CF_checkemp =
function(_CF_this){
//reset on submit_CF_error_exists =
false;_CF_error_messages =
new Array();_CF_error_fields =
new Object();_CF_FirstErrorField =
null;ć
//display error messages and return successif( _CF_error_exists ){
if( _CF_error_messages.length > 0 ){
// show alert() message_CF_onErrorAlert(_CF_error_messages);
// set focus to first form error, if the field supports js focus().if( _CF_this[_CF_FirstErrorField].type == "text" ){ _CF_this[_CF_FirstErrorField].focus(); }
}
return false;}
else {return true;}
}
//-->
</
script
>
<
script language="JavaScript" type
="text/javascript">
function
highlight(inObj){
theRow = inObj.parentNode.parentNode
theRow.className =
"highlighted"}
function noHighlight(inObj){theRow = inObj.parentNode.parentNode
theRow.className =
"NormalRow"}
</
script
>
<
style type
="text/css">
.SmallForm
{
font-size: 9px; line-height: 10px; height: 16px;}
.BinkleyTable {border-top: solid 1px #1E90FF; /*DodgerBlue*/border-left: solid 1px #1E90FF; /*DodgerBlue*/border-right: solid 1px #1E90FF; /*DodgerBlue*/border-bottom: solid 1px #1E90FF; /*DodgerBlue*/border-collapse: collapse;margin: 0 auto;}
.EMailTable {border-top : solid 1px #1E90FF; /*DodgerBlue*/border-left : solid 1px #1E90FF; /*DodgerBlue*/border-right : solid 1px #1E90FF; /*DodgerBlue*/border-bottom : solid 1px #1E90FF; /*DodgerBlue*/border-collapse : collapse;margin: 0 auto;text-decoration: none; color: #8FBC8F; /*DarkSeaGreen*/font-weight: Bold;font-family: Verdana;font-size: 90%; padding-top: 0px;padding-right: 10px;}
.BinkleyInvoiceTable
{
border-top : solid 1px #000000; /*Black*/border-left : solid 1px #000000; /*Black*/border-right : solid 1px #000000; /*Black*/border-bottom : solid 1px #000000; /*Black*/border-collapse : collapse;margin: 0 auto;}
.InvoiceCell
{
text-decoration: none; color: #000000; /*Black*/ border-right : solid 1px #000000; /*Black*/font-weight: Bold;font-family: Verdana;font-size: 90%;padding-top: 0px;padding-right: 10px;}
.InvoiceHeadingCell
{
text-decoration: none; color: #000000; /*Black*/ border-right : solid 1px #000000; /*Black*/border-top : solid 1px #000000; /*Black*/border-bottom : solid 1px #000000; /*Black*/font-weight: Bold;font-family: Verdana;font-size: 100%;padding-top: 0px;padding-right: 10px;}
.NormalCell
{
text-decoration: none; color: #1E90FF; /*DodgerBlue*/ font-weight: Bold;font-family: Verdana;font-size: 90%; padding-top: 0px;padding-right: 10px;}
.DataLabel
{
text-decoration: none; color: #541eff ; Background-Color: #FFFFFF; /*white*/font-weight: Bold;font-family: Verdana;font-size: 80%;padding-top: 3px;padding-right: 6px;}
.DataLabelSmoke
{
text-decoration: none; color: #541eff ; Background-Color: #F5F5F5; /*whitesmoke*/font-weight: Bold;font-family: Verdana;font-size: 80%;padding-top: 3px;padding-right: 6px;}
.MenuDataLabel
{
text-decoration: none; color: #541eff ; Background-Color:#F5F5F5; /*whitesmoke*/font-weight: Bold;font-family: Verdana;font-size: 70%;padding-top: 3px;padding-right: 6px;}
.GreenDataLabel
{
text-decoration: none; color: Green ; Background-Color: #FFFFFF; /*white*/font-weight: Bold;font-style: italic;font-family: Verdana;font-size: 85%;padding-top: 3px;padding-right: 6px;}
.RedDataLabel
{
text-decoration: none; color: Red ; Background-Color: #FFFFFF; /*white*/font-weight: Bold;font-style: italic;font-family: Verdana;font-size: 85%;padding-top: 3px;padding-right: 6px;}
.BlackDataLabel
{
text-decoration: none; color: Black ; Background-Color: #FFFFFF; /*white*/font-weight: Bold;font-family: Verdana;font-size: 80%;padding-top: 3px;padding-right: 6px;}
.BlueDataLabel
{
text-decoration: none; color: #1E90FF; /*DodgerBlue*/Background-Color: #FFFFFF; /*white*/font-weight: Bold;font-family: Verdana;font-size: 85%;padding-top: 3px;padding-right: 6px;}
.YellowDataLabel
{
text-decoration: none; Color: #FFFF00; Background-Color: #FFFFFF; /*white*/font-weight: Bold;font-family: Verdana;font-size: 85%;padding-top: 3px;padding-right: 6px;}
.DataEntry
{
text-decoration: none; color: Black ; Background-Color: #FFFFFF; /*white*/border-top : solid 1px #1E90FF; /*DodgerBlue*/border-left : solid 1px #1E90FF; /*DodgerBlue*/border-right : solid 1px #1E90FF; /*DodgerBlue*/border-bottom : solid 1px #1E90FF; /*DodgerBlue*/font-weight: Bold;font-family: Verdana;font-size: 85%;padding-top: 3px;padding-right: 6px;}
.DataDisplay
{
text-decoration: none; color: Black ; Background-Color: #FFFFFF; /*white*/font-weight: Bold;font-family: Verdana;font-size: 85%;padding-top: 3px;padding-right: 6px;}
.ColumnHeadingCell {font-size: 80%;padding-right: 6px;white-space: nowrap;Background-Color: #336699;border-style: none;border-color: #336699;text-align: center;Color: #FFFF00;text-align: Left;font-weight: Bold;font-family: Verdana;}
A:link.InColumnHeader
{
text-decoration: none; font-size: 80%;color: #7FFFD4; /*Aquamarine*/font-weight: Bold;font-family: Verdana;}
A:visited.InColumnHeader
{
text-decoration: none; font-size: 80%;color: #7FFFD4; /*Aquamarine*/font-weight: Bold;font-family: Verdana;}
A:active.InColumnHeader
{
color: #7FFFD4; /*Aquamarine*/font-size: 80%;font-weight: Bold;font-family: Verdana;}
A:hover.InColumnHeader
{
color: #336699 ; text-decoration:none; font-size: 80%;background: #FFFF00; /*Yellow*/font-weight: Bold;font-family: Verdana;}
A:link.NormalCell
{
text-decoration: none; color: #1E90FF; /*DodgerBlue*/font-weight: Bold;font-family: Verdana;}
A:visited.NormalCell
{
text-decoration: none; color: #1E90FF; /*DodgerBlue*/font-weight: Bold;font-size: 90%;font-family: Verdana;}
A:active.NormalCell
{
color: #1E90FF; /*DodgerBlue*/font-weight: Bold;font-family: Verdana;}
A:hover.NormalCell
{
color: #336699 ; text-decoration:none; background: #FFFF00; /*Yellow*/font-weight: Bold;font-family: Verdana;}
A:link
{
text-decoration: none; color: #00008B; /*DarkBlue*/font-weight: Bold;font-family: Verdana;}
A:visited
{
text-decoration: none; color: #00008B; /*DarkBlue*/font-weight: Bold;font-family: Verdana;}
A:active
{
color: #00008B; /*DarkBlue*/font-weight: Bold;font-family: Verdana;}
A:hover.special
{
color: #00008B; /*DarkBlue*/text-decoration:none; background: #FFFF00; /*Yellow*/font-weight: Bold;font-family: Verdana;/*font-size: 90%;*/}
.Fiscal
{
text-decoration: none; color: #1E90FF; /*DodgerBlue*/ font-weight: Bold;font-family: Verdana;font-size: 80%; padding-top: 0px;padding-right: 10px;}
A:link.Fiscal
{
text-decoration: none; color: #1E90FF; /*DodgerBlue*//*font-weight: Bold;font-family: Verdana;
font-size: 80%;*/
}
A:visited.Fiscal
{
text-decoration: none; color: #1E90FF; /*DodgerBlue*//*font-weight: Bold;font-family: Verdana;
font-size: 80%;*/
}
A:active.Fiscal
{
color: #1E90FF; /*DodgerBlue*//*font-weight: Bold;font-family: Verdana;
font-size: 80%;*/
}
A:hover.Fiscal
{
color: #336699 ; text-decoration:none; background: #FFFF00; /*Yellow*//*font-weight: Bold;font-family: Verdana;
font-size: 80%;*/
}
.normalRow
{
}
.highlighted
{
background: #FFFF00; /*Yellow*/}
.EditedBackground
{
background:#FFFF9C;}
body
{
background-color: #F5F5F5; /*whitesmoke*/;}
body.HomePage
{
background-color: #FFFFFF; /*white*/}
.HeadingOne
{
Color: #4169E1; /*RoyalBlue*/font-weight: Bold;font-size: 150%;border-top : solid 1px #1E90FF; /*DodgerBlue*/border-collapse : collapse;margin-top: 0cm;margin-bottom: 0cm;margin-left: 20%;margin-right: 20%;}
.HeadingTwo
{
Color: #4169E1; /*RoyalBlue*/font-weight: Bold;font-size: 100%;border-bottom : solid 1px #1E90FF; /*DodgerBlue*/border-collapse : collapse;margin-top: 0cm;margin-bottom: 0cm;margin-left: 20%;margin-right: 20%;}
.PageTitle
{
Color: #4169E1; /*RoyalBlue*/font-weight: Bold;font-size: 90%;font-family: Verdana;text-align: center;}
/*span.accesskey {text-decoration:underline}*/
</
style> <form name="emp" id="emp" action="/binkley/trackdata/Nomenu/test.cfm" method="get" onsubmit="return _CF_checkemp(this)"> <div id="Employerxautosuggest" class
="autosuggest">
<div style="float:left;"><input name="Employerx" type="text" class="autosuggestinput" size="50" id="Employerx" /></div><div id="Employerxloadingicon" style="float:left;"><img id='Employerx_cf_button' alt=' ' src="/CFIDE/scripts/ajax/resources/cf/images/static.gif"/></div><div id="Employerxcontainer" class="autosuggestcontainer" style="float:left;"></div></div> </form>
Copy link to clipboard
Copied
Well, that's ugly. Does this message board have a tag to place source code into? I cen edit that posting and remove the source code if needed...
Copy link to clipboard
Copied
https://gist.github.com/ or http://pastebin.com/ are better for posting code, rather than putting it inline here. I've never had problems posting code inline here, but a lot of people seem to have theirs all munged up whenever they try. I can only guess some browsers don't do what they're told, or something. Either way, for that amount of code, inline is NOT the place for it.
--
Adam
Copy link to clipboard
Copied
Adam Cameron. wrote:
https://gist.github.com/ or http://pastebin.com/ are better for posting code, rather than putting it inline here. I've never had problems posting code inline here, but a lot of people seem to have theirs all munged up whenever they try. I can only guess some browsers don't do what they're told, or something. Either way, for that amount of code, inline is NOT the place for it.
--
Adam
OK, I'll take that code out.
Copy link to clipboard
Copied
Better yet, remove all styling until you get the autosuggest to work.
Copy link to clipboard
Copied
Dan Bracuk wrote:
Better yet, remove all styling until you get the autosuggest to work.
That is well nigh impossible. The JS and CSS scripts are tightly integrated into ColdFusion.
Copy link to clipboard
Copied
Dan Bracuk wrote:
Better yet, remove all styling until you get the autosuggest to work.
I blocked my style sheet. No Change.
Copy link to clipboard
Copied
LyndonPatton wrote:
Well, that's ugly.
At least, the colours help break the monotony. The scripts appear to be all there.
We've been dealing with mapped paths and virtual directories, so I wondered whether the response is being posted to a different URL address. Let's verify.
Open the form page. Open the Firebug console. 'Clear' the console. Now, enter Sm in the form field. The action of that AJAX call should appear on the console. (More actions may appear when you click the mouse elsewhere). Click on the + sign of the topmost line to expand it. Click on the 'Headers'. What is the 'Referer'?
Added edit: After you type Sm in the form field, just one and only one action should appear in the Firebug console. If 2 or more appear, do let us know. It will mean some other request has overriden the autosuggest request.
Copy link to clipboard
Copied
BKBK wrote:
At least, the colours help break the monotony. The scripts appear to be all there.We've been dealing with mapped paths and virtual directories, so I wondered whether the response is being posted to a different URL address. Let's verify.
Open the form page. Open the Firebug console. 'Clear' the console. Now, enter Sm in the form field. The action of that AJAX call should appear on the console. (More actions may appear when you click the mouse elsewhere). Click on the + sign of the topmost line to expand it. Click on the 'Headers'. What is the 'Referer'?
Added edit: After you type Sm in the form field, just one and only one action should appear in the Firebug console. If 2 or more appear, do let us know. It will mean some other request has overriden the autosuggest request.
There are two actions,
1. Referer http://[my domain]/Binkley/trackdata/nomenu/test.cfm?CFID=921161&CFTOKEN=79992156
2. Referer http://[my domain]/Binkley/trackdata/nomenu/test.cfm?CFID=921161&CFTOKEN=79992156
Copy link to clipboard
Copied
LyndonPatton wrote:
There are two actions,
Please repeat the test to confirm. To be sure, this test: Open the form page. Open the Firebug console. 'Clear' the console. Now, enter Sm in the form field. Leave the mouse still. The action of that AJAX call should appear on the console. Do you at this point see just one action or two?
Copy link to clipboard
Copied
BKBK wrote:
Please repeat the test to confirm. To be sure, this test: Open the form page. Open the Firebug console. 'Clear' the console. Now, enter Sm in the form field. Leave the mouse still. The action of that AJAX call should appear on the console. Do you at this point see just one action or two?
OK, there is one action, I just entered teh S, before one action was for the S and teh second was for the SM. Looks like it was firing on each keyup
Copy link to clipboard
Copied
LyndonPatton wrote:
Referer
http://[my domain]/Binkley/trackdata/nomenu/test.cfm?CFID=921161&CFTOKEN=79992156
LyndonPatton wrote:
OK, there is one action,
I think we are finally there. The URL variables CFID and CFToken are likely messing up the AJAX calls.
Why are you passing them as query string anyway? If you correctly enable session management, then you shouldn't have to pass CFID and CFToken from one page to the next.
I hope the following will be the last test. This is to verify whether we will see the autosuggest list if there are no session variables in the URL.
Give the directory .../nomenu/ its own Application file, as defined below. This is a basic file, meant to expose the minimum required session functionality. Putting it in the nomenu directory makes it to intercept any other Application file you may have.
Content of /Binkley/trackdata/nomenu/Application.cfm :
<cfapplication name="autosuggest_test"
sessionmanagement="Yes"
setclientcookies="Yes"
sessiontimeout="#createTimeSpan(0,0,20,0)#"
applicationtimeout="#createTimeSpan(1,0,0,0)#">
Open the URL http://[my domain]/Binkley/trackdata/nomenu/test.cfm in the browser (that is, without any query string). Fill in the autosuggest form field. What do you get?
Copy link to clipboard
Copied
That fixed it!!
The only fidderence in my cfapp rag adn the one you suggest here is I didn't have setclientcookies="Yes".
Thank you so much!
Copy link to clipboard
Copied
LyndonPatton wrote:
In the response tab I see a json data set:
["SAAVEDRA, ANTONIO","SAAVEDRA, LEONEL","SABIN, CARL EUGENE ","SABO, ELIAS JOSEPH JR","SACHDEV
, ANN M"]
I would therefore expect you to see the autosuggestion list when you type S in the Employer field. Oh, why does it return full names? Did you change the query?
Copy link to clipboard
Copied
Full name: That's how the data is stored, it's a point of sale database, populated from ID card scans.
Copy link to clipboard
Copied
OK. And what did you type to get the above response? The letter S?
Copy link to clipboard
Copied
I typed sm for this response , I have marrows=5 in the cfquery tag just to shorten things up for testing.
Copy link to clipboard
Copied
Of course I had a response for s as well, it too had no errors. I posted the response from sm.
Copy link to clipboard
Copied
If your search is case sensitive, that would explain why you are not getting results.