Sunday, September 15, 2013

Jquery autocomplete with coldfusion

Jquery autocomplete with coldfusion

I'm trying to do a simple jquery autocomplete using coldfusion.
Based on Jens great example:
http://www.jensbits.com/2010/03/18/jquery-ui-autocomplete-with-coldfusion/
Here is my html:
<form name="merchantSearch" id="merchantSearch" method="post"
action="/index.cfm/shop.store/">
<input type="text" name="state" id="state"/>
<input type="submit" name="submit" id="submit" value=""
class="searchButton"/>
<input type="hidden" name="merchantID" id="merchantID"/>
</form>
Here is my coldfusion 'source' file:
<cfloop query="request.qMerchants">
<cfset request.merchantStruct = StructNew()>
<cfset request.merchantStruct["merchantID"] =
#request.qMerchants.merchantID#>
<cfset request.altText = altText..."
<cfset request.merchantStruct["label"] =
#request.qMerchants.merchant#&#request.altText#>
<cfset ArrayAppend(request.merchantArray, request.merchantStruct)>
</cfloop>
<cfoutput>
#serializeJSON(request.merchantArray)#
</cfoutput>
And here is my jquery file:
$(document).ready(function(){
$("#state").autocomplete(
"xhr/merchantAutoComplete.cfm",
{
minLength:2,
minchars:2,
autoFill:false,
select:function(event,ui) {
$("#merchantID").val(ui.item.merchantID);
$("#merchant").val(ui.item.merchant);
}
}
);
});
The cf file returns the json formatted data, but it stays as json. The
results end up like:
[
{"label":"AAA 112 pts\/$","merchantID":6},
{"label":"BBB 64 pts\/$","merchantID":62},
{"label":"CCC 48 pts\/$","merchantID":277},
{"label":"DDD 144 pts\/$","merchantID":278},
{"label":"EEE 80 pts\/$","merchantID":279}
]
And selecting one puts the whole json struct in the select box. I assume I
have the right group of jquery, jquery UI, and css files to get anything
back, but I'll post them just to make this really bloated:
<script src="/assets/js/jquery/jquery.autocomplete.js"></script>
<script src="/assets/js/jquery/jquery1.4.2.js"></script>
<link rel="stylesheet" href="/assets/css/jquery.autocomplete.css"
type="text/css" media="screen, projection" />
<script src="/assets/js/jquery/jquery-ui-1.8.2.js"></script>
I'm sure its a 'label/value' issue, but nothing seems to help. Any
suggestions would be awesome..Thanks!! Jon

No comments:

Post a Comment