complete example of using the jquery autocomplete with ColdFusion

[Guest]

Hi,

have any one tried the code from this link: http://www.jensbits.com/2010/03/18/jquery-ui-autocomplete-with-coldfusion/?

i created table with 2 columns:

Colnumn # 1: abbrev : TX, CA

Column # 2:  state: Texas, California

and try the code from the link above but it did do anything for me, i am not sure if didn't have it right, can you please help?

Thanks

Lisa

============

<!----index.cfm--->

<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() {
        
            $('#abbrev').val("");
            
            $("#state").autocomplete({
                source: "states.cfm",
                minLength: 2,
                select: function(event, ui) {
                    $('#state_id').val(ui.item.id);
                    $('#abbrev').val(ui.item.abbrev);
                }
            });
            
            $("#state_abbrev").autocomplete({
                source: "states_abbrev.cfm",
                minLength: 2
            });
        });
</script>
<cfdump var="#form#" label="Form Fields" />

<form action="index.cfm"  method="post">
<fieldset>
<legend>jQuery UI Autocomplete Example - ColdFusion Backend</legend>
<p>Start typing the name of a state or territory of the United States</p>
<p class="ui-widget"><label for="state">State (abbreviation in separate field): </label>
    <input type="text" id="state"  name="state" /> <input readonly="readonly" type="text" id="abbrev" name="abbrev" maxlength="2" size="2"/></p>
    <input type="hidden" id="state_id" name="state_id" />
<p class="ui-widget"><label for="state_abbrev">State (replaced with abbreviation): </label>
<input type="text" id="state_abbrev" name="state_abbrev" /></p>
<p><input type="submit" name="submit" value="Submit" /></p>
</fieldset>
</form>

<!---states.cfm--->
<cfset returnArray = ArrayNew(1) />

<cfquery name="qryStates" dataSource="remoteNetwork">
    Select * from states where state like <cfqueryparam value="%#URL.term#%" cfsqltype="cf_sql_varchar">
</cfquery>

<cfloop query="qryStates">
    <cfset statesStruct = StructNew() />
    <cfset statesStruct["id"] = id />
    <cfset statesStruct["label"] = state />
    <cfset statesStruct["abbrev"] = abbrev />
    
    <cfset ArrayAppend(returnArray,statesStruct) />
</cfloop>

<cfoutput>
#serializeJSON(returnArray)#
</cfoutput>
</cfif>

[duncancumming]

What do you get if you just directly browse to your states page, e.g. states.cfm?term=AZ

You have a closing </cfif> in states.cfm, but I don't seen an opening <cfif>.  I'm expecting you'll get an error.

[tribule]

If you download https://github.com/devbridge/jQuery-Autocomplete this works perfecly for country codes. If you change the country code to a state code and the country name to a state, it will do what you want. You'll need to rename the variables in JavaScript to make the code more applicable/readable e.g. change all variable occurences of country to state etc, but it should work. It has a countries.txt file that you can rename to states.txt. If you want to use a dynamic .cfm template in place of countries.txt just ensure that the exact object format of countries.txt is maintained (starts with { and ends with } and has lists of objects in the form "countrycode":"country name",...).

[Guest]

Tribule

the autocomplete you posted uses a txt file for the data. I need the same code but want to query a database. Any suggestions?

[Guest]

I need to pull from a database not a text file though