Jquery autocomplete with json

[Guest]

Does anyone have a full working example of Jquery autocomplete with json that works?

I can't get any of the examples that I am finding online to work.

[Guest]

I have the following code that doesn't work. But when I browse the CFC is works perfectly. Thoughts?

<script type="text/javascript">

$(function() {

    $("#searchPhrase").autocomplete({

        source: "/contentfiles/ajaxlookup.cfc?method=getInstitutions&returnformat=json"

    });

});

</script>

category: <input id="searchPhrase" />

[tribule]

Please define "doesn't work". Put your code online somewhere so that we can see it running.

[Guest]

It doesn't bring back any records. But if I browse the CFC it works.

[tribule]

AS you know, the CFC just replaces the file by outputting exactly the same data as the file would. Without seeing HTTP traces, JavaScript error logs etc etc it's very hard to give an answer or see what is wrong. Please put your code online so I can take a look at it actually running.

Btw, my answer here http://forums.adobe.com/thread/1319717?tstart=0 refers to a script that uses Ajax already, and the data is JSON encoded too.

[Guest]

It's on my DEV server and it may not work on my prod server because the server admin hasn't turned on remote access yet.

Here is my code:

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

<script type="text/javascript">

$(function() {

    $("#category").autocomplete({

        source: "<cfoutput>#request.serverURL#</cfoutput>/contentfiles/ajaxlookup.cfc?method=getInstitutions&returnformat=json"

    });

});

</script>

category: <input id="category" name="category" />

And here is my CFC:

<cffunction access="remote" name="getInstitutions" returntype="any">

<cfargument name="searchPhrase"     type="any" required="true" default="">

<!--- Define variables --->

<cfset var result=ArrayNew(1)>

<!--- Do search --->

<cfquery datasource="#request.dsn#" name="data">

SELECT     strInstitutionName

FROM tblInstitutions

WHERE LOWER(strInstitutionName) LIKE <cfqueryparam cfsqltype="cf_sql_varchar" value="%#LCASE(arguments.searchPhrase)#%" />

AND bitselectionlist = 1

AND bitActive = 1

AND IntInstitutionCategoryID IN (1,2,3,6,7,8,9)

AND bitRemoteLogin  <> 1

ORDER BY strInstitutionName

</cfquery>

<!--- Build result array --->

<cfloop query="data">

<cfset ArrayAppend(result, strInstitutionName)>

</cfloop>

<!--- And return it --->

<cfreturn result>

    </cffunction>

[Guest]

Could there be server settings that will not allow jquery to work?

I added the code from this example on my server and it doesn't work either:

http://jqueryui.com/autocomplete/

[Guest]

Well I turned debugging off and this work but my other code still doesnt work

[tribule]

jQuery is nothing to do with ColdFusion. You are just using ColdFusion to serve out data from a database query. You will have to find a way to get your code online so we can see it, since there are many dozens of reasons as to why code does not work the way it should.

[Guest]

There is no way right now for me to make it public

I am getting the response I need though. I can see that in the response tab in Firebug.

The results just are being displayed on the page.

[Guest]

I think my data is in the wrong format. Here is my response:

//"\/\/[\"Miami Area Geriatric Education Center\",\"Miami Children's Hospital\",\"Miami Research Associates\",\"Miami University (Oxford, Ohio)\",\"Miami Valley Hospital\",\"Miami, FL-546\",\"University of Miami\\\/Jackson Health System\"]"

[tribule · Accepted solution]

The ongoing thread here http://www.houseoffusion.com/groups/cf-talk/thread.cfm/threadid:64866 is really saying the same thing you and I are, namely that the data is not in the correct format (as you know). That thread made mention to this article: http://www.petefreitag.com/item/720.cfm. The leading "//" on the front of that data shows that secure JSON is enabled. This "//" prefix needs to be removed from the data. Can you put this in your code to turn secure JSON off and then see what response you get?

<cfset this.secureJSON = false>

[Guest]

Ok I got it to work!!

I added:

&returnformat=plain to my method call

secureJSON = "yes" to my function

I also added this to my component:  <cfset this.secureJSON = true> <cfset this.secureJSONPrefix = "//">

Of course I was still getting // prefix.  I googled secureJSON prefix and found this article:  http://www.raymondcamden.com/index.cfm/2011/11/8/Handling-JSON-with-prefixes-in-jQuery-and-jQueryUI

http://www.raymondcamden.com/index.cfm/2011/11/8/Handling-JSON-with-prefixes-in-jQuery-and-jQueryUI

I added the data filter and it worked!

[tribule]

Well done, the format plain must be a simple JavaScript array then? I think if you had secureJSON off and the plain return format, it would have worked too. Btw JSON comment prefixes can be disabled via the CF admin too. All's well that ends well.