Auto fill textbox using jquery in Coldfusion

Auto fill textbox using jquery in Coldfusion . You allow the user to type in a value into a Textbox and fetch values from database according that keyword.

	<!--- 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>

view raw ajax-autocomplete.cfm hosted with ❤ by GitHub

	<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>

view raw get_countries_list.cfm hosted with ❤ by GitHub