Posted At : Dec 04, 2009 14:04 PM
| Posted By : Ed Tabara
Related Categories: ColdFusion, AJAX, JavaScript
Related Categories: ColdFusion, AJAX, JavaScript
So after incuding the library with
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>
creating the form:
<form name="frm" action="someactionhere" method="post">
<strong>Zip:</strong> <input size="5" name="Zip" id="Zip" type="Text" value="#Zip#">
<strong>City:</strong> <input size="30" name="City" id="City" type="Text" value="#City#">
<strong>State:</strong>
<select name="State" id="State">
<option value=""<cfif State eq ""> selected</cfif>>
<cfloop query="getStates">
<option value="#stateCode#"<cfif State eq stateCode> selected</cfif>> #stateName#
</cfloop>
</select>
</form>and ading the JS:
<script language="JavaScript" type="text/javascript">
<!--
var options, a;
jQuery(function(){
options =
{
serviceUrl:'index.cfm?action=buyers.getCity&loadContent=true&Zip='+$('##Zip').val()
, maxHeight:150
}
a = $('##City').autocomplete(options);
});
//-->
</script>i started to test it in order to move farther.
And of course issues started. First problem was that the value from the Zip field was not passed to index.cfm?action=buyers.getCity. Instead of the value just entered was passed the one that was in the field at the start, so it wasn't exactly what i needed. Maybe there exist an easier way, i don't know, but after quite long playing with it i came to the following solution. I created a new JS function doAutoSuggest() and moved existing code into it and then made the call to it from City's onclick
<form name="frm" action="someactionhere" method="post">
<strong>Zip:</strong> <input size="5" name="Zip" id="Zip" type="Text" value="#Zip#">
<strong>City:</strong> <input size="30" name="City" id="City" onclick="doAutoSuggest();" type="Text" value="#City#">
<strong>State:</strong>
<select name="State" id="State">
<option value=""<cfif State eq ""> selected</cfif>>
<cfloop query="getStates">
<option value="#stateCode#"<cfif State eq stateCode> selected</cfif>> #stateName#
</cfloop>
</select>
</form>
<script language="JavaScript" type="text/javascript">
<!--
function doAutoSuggest()
{
options =
{
serviceUrl:'index.cfm?action=buyers.getCity&loadContent=true&Zip='+$('##Zip').val()
, maxHeight:150
};
$('##City').autocomplete(options);
}
//-->
</script>The script that retrieves cities data and pass it back on the AJAX call is:
<cfsetting showdebugoutput="No" enablecfoutputonly="Yes">
<cfsilent>
<cfparam name="query" default="">
<cfparam name="Zip" default="">
<cfquery name="getCities" datasource="#application.dsn#">
Select distinct top 50 City + ', ' + st as ct, City + '|' + st as ct2
From zips
Where City like '#query#%'
<cfif Len(Zip)>
and zip = <cfqueryparam cfsqltype="CF_SQL_VARCHAR" value="#Zip#">
</cfif>
Order by ct asc
</cfquery>
<cfset items = QuotedValueList(getCities.ct, ",")>
<cfset items2 = QuotedValueList(getCities.ct2, ",")>
</cfsilent>
<cfoutput>{ query:'#query#',suggestions:[#items#],data:[#items2#] }</cfoutput>Note that the Zip may not be entered and so there may be City with same name for different State. Because of it, in the suggestions i return city, state pairs and in data i place same pairs but without the blank after the comma so that it to can be used for later easy processing.
What is left now is to make sure the City and State form fields are filled with the right values when something is selected in the AutoComplete dropdown.
Because the data come in a city,state format we can split it and so onSelect to place it in needed form fields. But because the State is a dropdown element you can't just place the right value into it, you need to change the current selection. So, i created a JS function that taking as attribute the new value, will set it AND make the right selection.
function getOptionInde<img src="images/smiles/14.gif" border="0">opt)
{
document.frm.State.value=opt;
return document.getElementById('State').selectedIndex;
}And so, the final code is as follow
<form name="frm" action="someactionhere" method="post">
<strong>Zip:</strong> <input size="5" name="Zip" id="Zip" type="Text" value="#Zip#">
<strong>City:</strong> <input size="30" name="City" id="City" onclick="doAutoSuggest();" type="Text" value="#City#">
<strong>State:</strong>
<select name="State" id="State">
<option value=""<cfif State eq ""> selected</cfif>>
<cfloop query="getStates">
<option value="#stateCode#"<cfif State eq stateCode> selected</cfif>> #stateName#
</cfloop>
</select>
</form>
<script language="JavaScript" type="text/javascript">
<!--
function doAutoSuggest()
{
options =
{
serviceUrl:'index.cfm?action=buyers.getCity&loadContent=true&Zip='+$('##Zip').val()
, maxHeight:150
, onSelect: function(value, data){ qwe=data.split("|");document.frm.City.value=qwe[0];document.frm.State.selectedIndex=getOptionInde<img src="images/smiles/14.gif" border="0">qwe[1]); }
};
$('##City').autocomplete(options);
}
function getOptionInde<img src="images/smiles/14.gif" border="0">opt)
{
document.frm.State.value=opt;
return document.getElementById('State').selectedIndex;
}
//-->
</script>Enjoy!
