ajax-autocomplete.cfm

<!--- Start : Ajax Auto Complete --->
<script type="text/javascript" src="js/jquery.js"></script>
<script type='text/javascript' src='js/jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" />

<script type="text/javascript">
$(document).ready(function() {
	$("#CountryName").autocomplete("get_countries_list.cfm", {
		width: 260,
		matchContains: true,
		max: 20,
		cacheLength: 10,
		selectFirst: false
	});

	$("#CountryName").result(function(event, data, formatted)
	{
	  $("#CountryID").val(data[1]);
	});
});
</script>
<!--- End : Ajax Auto Complete --->	



<form action="##" method="post">
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr> 
<td>
<input type="hidden" name="CountryID" id="CountryID" />
<input type="text" name="CountryName" id="CountryName" maxlength="100" value="">
</td>
<td>
<input type="submit" value="Search" align="absmiddle">
</td>
</tr>
</table>
</form>  

get_countries_list.cfm

<cfsetting showdebugoutput="no">
<cfoutput>
    <cfquery datasource="TestDB" name="qFiltered">
     select * from shema_countries where ctr_name like '%#Q#%'
    </cfquery> 

    <cfloop query="qFiltered">
       #ctr_name# | #ctr_id# <br />
    </cfloop>

</cfoutput>