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 Zipmay not be entered and so there may be Citywith same name for different State. Because of it, in the suggestionsi return city, statepairs and in datai 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 Cityand Stateform fields are filled with the right values when something is selected in the AutoComplete dropdown.
Because the data come in a city,stateformat we can split it and so onSelectto place it in needed form fields. But because the Stateis 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!