Link to home
Start Free TrialLog in
Avatar of CurtinProp
CurtinProp

asked on

Coldfusion and jquery autocomplete (using remote data)

Hi All.

I'd like to use an auto complete on a name field in my form using JQUERY and COLDFUSION.

I'm working from the http://www.simonwhatley.co.uk/examples/autocomplete/jquery/ tutorial but I seem to be coming unstuck, hence posting on here.

My code is provided below, i believe where im getting it wrong is the suggestion.cfm page where I actually call the data.

Can anyone shed some light on this for me?

thanks
<script type="text/javascript">
		$(document).ready(function() {
			$("#inputtest").autocomplete(
				"../suggestions.cfm",
				{
					minChars:2,
					delay:100,
					autoFill:false,
					matchSubset:false,
					matchContains:1,
					cacheLength:10,
					selectOnly:1
				}
			);

			
		});


</script>




<input type="text" name="inputtest" id="inputtest" />




<!--- code below for suggestions.cfm --->


<cfsetting enablecfoutputonly="true">
<cfparam name="q" default="" />
<cfquery name="qry" datasource="afm_fire">
SELECT em_name 
FROM afm.em
WHERE em_name LIKE <cfqueryparam value="#URL.q#%" cfsqltype="cf_sql_varchar" />
</cfquery>
<cfoutput query="qryGetCountry">
#qry.em_name##chr(10)#
</cfoutput>

Open in new window

Avatar of azadisaryev
azadisaryev
Flag of Hong Kong image

>> <cfquery name="qry"
>> <cfoutput query="qryGetCountry">

looks like you are outputting a wrong query?

Azadi
you should also correct your <cfparam> tag:

<cfparam name="URL.q" default="">

Azadi
Avatar of CurtinProp
CurtinProp

ASKER

My apologies, having made those changes I get an interesting result.

When a user starts to type into the input area, the autocomplete appears to work but it outputs an empty list of suggestions and when I select one of them it populates the input area with lines from the doctype and heading.

Im assuming its picking up lines of the source from suggestions.cfm??

I've attached an imagine showing the drop down, hopefully it makes sense.
auto-comp-screen1.jpg
ASKER CERTIFIED SOLUTION
Avatar of azadisaryev
azadisaryev
Flag of Hong Kong image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial