I solved it by adding returnFormat="JSON"
to my <cffunction>
, otherwise it sends the data through a "wddxpacket" and Typeahead obviously cannot handle straight out of the box.
Bootstrap typeahead call to ColdFusion
-
18-07-2023 - |
题
I am trying to make a simple test with Typeahead.js that fetches its data from a coldfusion component that returns a simple JSON string with the data.
Here is my AjaxCtrl.cfc
<cfcomponent output="false">
<cffunction name="GetParams" access="remote" output="false">
<cfset objData = [
{ PARAMCODE = "SYSTEM_PARAM_1",
PARAMVAL = "FALSE"
},
{ PARAMCODE = "SYSTEM_PARAM_2",
PARAMVAL = true
},
{ PARAMCODE = "SYSTEM_PARAM3",
PARAMVAL = "1003"
},
{ PARAMCODE = "SYSTEM_PARAM4",
PARAMVAL = 1004
}
] />
<cfreturn objData >
</cffunction>
</cfcomponent>
So when I try to access http://localhost/foo/bar/AjaxCtrl.cfc?method=GetParams
in my browser I get the following output as expected :
[{"PARAMCODE":"SYSTEM_PARAM_1","PARAMVAL":false},{"PARAMCODE":"SYSTEM_PARAM_2","PARAMVAL":true},{"PARAMCODE":"SYSTEM_PARAM_3","PARAMVAL":1003},{"PARAMCODE":"SYSTEM_PARAM_4","PARAMVAL":1004}]
Then here is my javascript file
// constructs the suggestion engine
var engine = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.PARAMCODE); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: "http://localhost/dev/test/djb/AjaxCtrl.cfc?method=GetParams"
}
);
// kicks off the loading/processing of `local` and `prefetch`
engine.initialize();
$( "input.typeahead" ).typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'parameters',
displayKey: 'PARAMCODE',
source: engine.ttAdapter()
});
So far I only could make it work with the LOCAL hardcoded data examples. Nothing will work with all the examples I've tried whether it's prefetch or remote. What am I doing wrong?
解决方案
不隶属于 StackOverflow