JQuery AutoComplete with Remote Data (COLDFUSION)

Question

I\'m a newbie with JQuery trying to pull remote data from a ColdFusion query to show in my textbox.

I am receiving an error in firebug when calling my CFC:

Answer 1

(Expanded from comments...)

As mentioned here, the error means the code was expecting a parsed JSON object, but was passed a simple string instead. jQuery is not parsing your cfc response string into a JSON object. Instead it is just passing the plain string into the response() function, which causes an error because that function expects an array. The reason the response is not parsed automatically is that datatype has the wrong case. It should be:

     dataType: "json"  // Note, upper case "T"

As an aside, do not forget to var/local scope ALL of your function local variables, including query names.

Update:

I think a simpler approach here would be to change the cffunction argument name to term then use a URL as the source. Also, since you are not using any of the extra features of cfform, may as well switch to plain html elements instead.

<script>
$(document).ready(function() {  
         $( "#searchField" ).autocomplete({
                source: "/kb/cfcs/search.cfc?method=lookupTitle&returnformat=json",
                minLength: 3,
                select: function(event, ui) {
                    $('#searchField').val(ui.item.value);
                    $('#defaultArticleID').val(ui.item.label);
                }
            });
        });
</script>  
...
<form>
    <label for="searchField">Search field: </label>
    <input id="searchField">
    <input id="defaultArticleID">
</form>