#Adam.Blog# » jQuery http://blog.adampresley.com I'm bringin' nerdy back. Fri, 03 Sep 2010 15:59:26 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Code for my Dallas TechFest 2010 Presentation Available http://blog.adampresley.com/2010/code-for-my-dallas-techfest-2010-presentation-available/ http://blog.adampresley.com/2010/code-for-my-dallas-techfest-2010-presentation-available/#comments Thu, 05 Aug 2010 15:45:08 +0000 Adam Presley http://blog.adampresley.com/?p=1072
  • Using jqGrid with ColdFusion
  • Fisheye Menu with jQuery
  • Example of jQuery Autocomplete with ColdFusion
    • ]]>     Finally, as requested, my code and slides for my Dallas TechFest 2010 presentation are available for download. If you missed it I presented on taking an existing ColdFusion application (could be anything, PHP, JSP, Groovy + Grails) and incrementally spicing it up with jQuery. Click here to download the code and instructions on getting setup!

    Related posts:

    1. Using jqGrid with ColdFusion
    2. Fisheye Menu with jQuery
    3. Example of jQuery Autocomplete with ColdFusion

    ]]>     http://blog.adampresley.com/2010/code-for-my-dallas-techfest-2010-presentation-available/feed/ 0     Update to apMessageBox Component http://blog.adampresley.com/2010/update-to-apmessagebox-component/ http://blog.adampresley.com/2010/update-to-apmessagebox-component/#comments Tue, 18 May 2010 16:28:50 +0000 Adam Presley http://blog.adampresley.com/?p=926
  • Fisheye Menu with jQuery
  • Update v0.2.0 to jQuery Plugin – AP Tags
  • New jQuery Plugin – AP Tags
    • ]]>     Wanted to throw out a quick blurb that I have updated my apMessageBox component. The newest version makes usage a little easier by providing convenience methods to display an error or information dialog, as well as providing default locations for the error and information icons. Visit http://blog.adampresley.com/jquery/apmessagebox/ to see the latest documentation and download the latest code.

    Happy coding!!

    Related posts:

    1. Fisheye Menu with jQuery
    2. Update v0.2.0 to jQuery Plugin – AP Tags
    3. New jQuery Plugin – AP Tags

    ]]>     http://blog.adampresley.com/2010/update-to-apmessagebox-component/feed/ 0     Selecting All Items in a Multi-Select Box http://blog.adampresley.com/2010/selecting-all-items-in-a-multi-select-box/ http://blog.adampresley.com/2010/selecting-all-items-in-a-multi-select-box/#comments Wed, 05 May 2010 22:56:11 +0000 Adam Presley http://blog.adampresley.com/?p=909
  • Using jqGrid with ColdFusion
  • Fisheye Menu with jQuery
  • Example of jQuery Autocomplete with ColdFusion
    • ]]>     Here’s a quick jQuery tidbit. If you ever need to select or unselect all items in a muti-select box (a <select> tag set to allow multiple selected items), here’s a jQuery selector to do it.

    $("#selectBox *").attr("selected", "selected");

    Notice the asterisk after the ID selector? That tells jQuery to get ALL child elements of the select box. We then set the selected attribute to selected, and suddenly all the items are highlighted! To unselect them all you would do the opposite.

    $("#selectBox *").attr("selected", "");

    Setting the attribute selected to blank unselects them all. Man I love jQuery!!

    Click here to see this in action. Happy coding!

    Related posts:

    1. Using jqGrid with ColdFusion
    2. Fisheye Menu with jQuery
    3. Example of jQuery Autocomplete with ColdFusion

    ]]>     http://blog.adampresley.com/2010/selecting-all-items-in-a-multi-select-box/feed/ 1     Example of jqGrid with ColdFusion http://blog.adampresley.com/2010/example-of-jqgrid-with-coldfusion/ http://blog.adampresley.com/2010/example-of-jqgrid-with-coldfusion/#comments Sat, 03 Apr 2010 16:54:37 +0000 Adam Presley http://blog.adampresley.com/?p=877
  • Using jqGrid with ColdFusion
  • Fisheye Menu with jQuery
  • Example of jQuery Autocomplete with ColdFusion
    • ]]>     jqGrid Example SnapshotEarlier last month I blogged about how to use jqGrid, a grid component written on top of jQuery, with ColdFusion. A reader of the site asked that I put up an actual demo of this in action.

    As a result I have setup a demo page with a basic jqGrid implementation that displays names and email addresses, and supports paging and sorting. So without further ado here is the link to the demo page. For more demos and examples you can also visit my Blog Code Home.

    Happy coding!

    Related posts:

    1. Using jqGrid with ColdFusion
    2. Fisheye Menu with jQuery
    3. Example of jQuery Autocomplete with ColdFusion

    ]]>     http://blog.adampresley.com/2010/example-of-jqgrid-with-coldfusion/feed/ 0     apMessageBox – A New jQuery UI Component http://blog.adampresley.com/2010/apmessagebox-a-new-jquery-ui-component/ http://blog.adampresley.com/2010/apmessagebox-a-new-jquery-ui-component/#comments Fri, 26 Mar 2010 22:48:57 +0000 Adam Presley http://blog.adampresley.com/?p=836
  • Selecting All Items in a Multi-Select Box
  • Update v0.2.0 to jQuery Plugin – AP Tags
  • New jQuery Plugin – AP Tags
    • ]]>     A quick post to announce my new JavaScript component, apMessageBox. This component is a quick and easy way to display error or informational messages in JavaScript-based applications. It is based jQuery 1.4 and jQuery UI 1.8. Go here to see more about it!

    Related posts:

    1. Selecting All Items in a Multi-Select Box
    2. Update v0.2.0 to jQuery Plugin – AP Tags
    3. New jQuery Plugin – AP Tags

    ]]>     http://blog.adampresley.com/2010/apmessagebox-a-new-jquery-ui-component/feed/ 4     Using jqGrid with ColdFusion http://blog.adampresley.com/2010/using-jqgrid-with-coldfusion/ http://blog.adampresley.com/2010/using-jqgrid-with-coldfusion/#comments Fri, 19 Mar 2010 20:17:20 +0000 Adam Presley http://blog.adampresley.com/?p=806
  • Code for my Dallas TechFest 2010 Presentation Available
  • Fisheye Menu with jQuery
  • Example of jQuery Autocomplete with ColdFusion
    • ]]>     When looking for a grid solution compatible with jQuery that does not involve using CFGRID, the best I found has been jqGrid. It has a very impressive list of features, wide support for various incoming data formats, and is an all around solid solution. For us ColdFusion developers, however, just trying to “plug it in” and go may leave you scratching your head. So I am here to hopefully get you started using this nifty grid in your next ColdFusion application. The very first order of business is to download jqGrid. For simplicity sake I would start by downloading the whole set of files. Once you’ve done this we must include them in our page. There are four files you will concern yourself with to start.

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="/js/jqgrid/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="/js/jqgrid/jquery.jqGrid.min.js"></script>
 
<link rel="stylesheet" href="/js/jqgrid/ui.jqgrid.css" type="text/css" />

    The above code shows that we need to at least include the jQuery library, the English locale settings for jqGrid, the jqGrid JavaScript source, and the appropriate CSS file. The next order of business is to create a container for jqGrid to live in. For the grid we need to create a simple, blank table like so.

    <table id="myGrid"></table>

    That takes care of the markup and necessary includes, so now let’s jump to the ColdFusion side. Server side we need to take some set of data and return it in a JSON format that jqGrid likes. First let’s make a simple CFM page that gives us the JSON output we need for jqGrid.

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

    <cfsetting showdebugoutput="false" />
 
<cfset data = queryNew("id,name,title,age") />
 
<cfset queryAddRow(data) />
	<cfset querySetCell(data, "id", 1) />
	<cfset querySetCell(data, "name", "Adam Presley") />
	<cfset querySetCell(data, "title", "Giant nerd") />
	<cfset querySetCell(data, "age", 31) />
 
<cfset queryAddRow(data) />
	<cfset querySetCell(data, "id", 2) />
	<cfset querySetCell(data, "name", "Steve Good") />
	<cfset querySetCell(data, "title", "Flex dude") />
	<cfset querySetCell(data, "age", 30) />
 
<cfset queryAddRow(data) />
	<cfset querySetCell(data, "id", 3) />
	<cfset querySetCell(data, "name", "Adrian Moreno") />
	<cfset querySetCell(data, "title", "Kung foo") />
	<cfset querySetCell(data, "age", 21) />
 
<cfset queryAddRow(data) />
	<cfset querySetCell(data, "id", 4) />
	<cfset querySetCell(data, "name", "Chris Jordan") />
	<cfset querySetCell(data, "title", "Mac daddy") />
	<cfset querySetCell(data, "age", 32) />
 
<cfset queryAddRow(data) />
	<cfset querySetCell(data, "id", 5) />
	<cfset querySetCell(data, "name", "Will Belden") />
	<cfset querySetCell(data, "title", "Look how awesome I am") />
	<cfset querySetCell(data, "age", 33) />
 
<cfset queryAddRow(data) />
	<cfset querySetCell(data, "id", 6) />
	<cfset querySetCell(data, "name", "Todd Pires") />
	<cfset querySetCell(data, "title", "Coldbox Voodoo Magic!") />
	<cfset querySetCell(data, "age", 20) />
 
<cfset queryAddRow(data) />
	<cfset querySetCell(data, "id", 7) />
	<cfset querySetCell(data, "name", "Tim Jesperson") />
	<cfset querySetCell(data, "title", "Mr. Limo") />
	<cfset querySetCell(data, "age", 22) />
 
<cfset result = {} />
 
<cfset result["rows"] = [] />
<cfset result["page"] = javaCast("int", 0) />
<cfset result["records"] = javaCast("int", data.recordCount) />
<cfset result["total"] = javaCast("int", 1) />
 
<cfloop query="data">
	<cfset temp = {} />
	<cfset temp["id"] = javaCast("int", data.id) />
	<cfset temp["cell"] = [] />
 
	<cfset arrayAppend(temp["cell"], javaCast("int", data.id)) />
	<cfset arrayAppend(temp["cell"], data.name) />
	<cfset arrayAppend(temp["cell"], data.title) />
	<cfset arrayAppend(temp["cell"], javaCast("int", data.age)) />
 
	<cfset arrayAppend(result["rows"], temp) />
</cfloop>
 
<cfoutput>#serializeJson(result)#</cfoutput>

    The first part of this code (gridjson.cfm) is simple. We are just crafting a query by hand for demonstration purposes. The result structure could use a bit of explanation. jqGrid expects a few things in the JSON response. First it expects that all the grid data be in an array named rows. Each item in this array is an object that contains two keys: id and cell. The id key can be thought of as the primary key value for the record. The cell key contains an array of all the record’s values. In our example we include id, name, title, and age. Also notice we include keys for page, records, and total. These keys are used for grid paging, which we will not investigate in this posting.

    I’d also like to point out that jqGrid by default is expecting a certain format of JSON to come back. This is why we are so explicit in how we are crafting the JSON response. Also note I am using array notation when building my structures. Why? Because the ColdFusion method serializeJson will maintain key case when array notation is used. If you do not use array notation, the structure keys are capitalized. JavaScript is a case-sensitive language don’t forget, so maintaining case is pretty important.

    Now that we have a valid JSON response coming back, let’s build some JavaScript to actually build the grid. The grid works by using a jQuery selector against the table we created, and calling the jqGrid method. This method potentially takes a lot of parameters, but we will only concern ourselves with the few necessary to get a grid working. Take a look.

    1
2
3
4
5
6
7
8
9
10
11
12
13
14

    $("#myGrid").jqGrid({
	url: "gridjson.cfm",
	datatype: "json",
	height: 165,
	width: 450,
	mtype: "POST",
	emptyrecords: "No employees to display.",
	colNames: [ "Name", "Title", "Age" ],
	colModel: [
		{ name: "name", width: 45, sortable: false, editable: false },
		{ name: "title", width: 65, sortable: false, editable: false },
		{ name: "age", width: 35, sortable: false, editable: false }
	]
});

    As you can see we select the table myGrid and call the jqGrid method against it. From here we specify our gridjson.cfm page we crafted above to supply the JSON data for the grid. We also make sure to specify that the grid is expecting JSON as the response by setting the datatype to “json”. The other important pieces are the colNames and colModel keys. colNames are what header columns are actually displayed in the grid. colModel is the fun part. It is an array of objects, each object representing a column in the JSON data. Here the name key is the name of the column coming back. The width key simply specifies how wide this column should display. sortable and editable are to determine if the column can be sorted or edited.

    Put it all together, and you have a working jqGrid! Have fun with jQuery, and happy coding!

    Related posts:

    1. Code for my Dallas TechFest 2010 Presentation Available
    2. Fisheye Menu with jQuery
    3. Example of jQuery Autocomplete with ColdFusion

    ]]>     http://blog.adampresley.com/2010/using-jqgrid-with-coldfusion/feed/ 3     Fisheye Menu with jQuery http://blog.adampresley.com/2010/fisheye-menu-with-jquery/ http://blog.adampresley.com/2010/fisheye-menu-with-jquery/#comments Thu, 21 Jan 2010 22:33:46 +0000 Adam Presley http://blog.adampresley.com/?p=767
  • Code for my Dallas TechFest 2010 Presentation Available
  • Using jqGrid with ColdFusion
  • Example of jQuery Autocomplete with ColdFusion
    • ]]>     For those that have a small case of “Mac envy”, this post is for you (and me, honestly). One of the neatest things about the Mac OS user interface is the “fisheye” menu at the bottom of the screen. You know the one, where there is a dock bar with icons on it, and when you mouse over the icons they grow in size, giving the “fisheye” effect. Today we are going to look at a jQuery plugin that makes putting this kind of menu into affect in your websites easy as pie!

    Stefan Petre at http://interface.eyecon.ro has a very nice jQuery plugin to achieve this very effect, and its usage is pretty easy! To begin you’ll need the jQuery Fisheye plugin. I’ve gone and created a minified version of the code for convenience, which may be downloaded here.

    First off let’s start by building the shell of an HTML page, including the markup that will drive the menu.

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

    <cfsetting showdebugoutput="false" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Example of jQuery Fisheye</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="description" content="Example of jQuery Fisheye" />
	<meta name="keywords" content="jquery,fisheye,example,code,coldfusion" />
	<meta name="author" content="Adam Presley" />
 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script type="text/javascript" src="fisheye.js"></script>
 
	<style type="text/css">
		.dockwrap { margin: 105px auto; width: 100%; background-color: #333; border: 1px solid black; }
		#dock { top: 0; width: 775px; margin: 0 auto; }
		.dock-container { position: relative; top: -8px; height: 50px; }
		a.dock-item { display: block; width: 50px; position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; }
		.dock-item span { display: none; padding-left: 20px; }
		.dock-item img { border: 0; margin: 5px 10px 0px; width: 100%; }
	</style>
</head>
 
<body>
 
	<p>
		Below is an example of using the Fisheye Menu interface from 
		<a href="http://interface.eyecon.ro" target="_blank">http://interface.eyecon.ro</a> 
		to build a sleek, snazzy menu similar in style to the Mac OS. I've
		also provided the minified version of the Fisheye JavaScript packaged up
		in a nice neat single-JS file for you <a href="fisheye.js">here</a>. 
	</p>
 
	<div class="dockwrap">
		<div id="dock">
			<div class="dock-container">
				<a class="dock-item" href="#"><span>Link 1</span><img src="home_48.png" alt="Link 1" /></a> 
				<a class="dock-item" href="#"><span>Link 2</span><img src="paper_content_48.png" alt="Link 2" /></a> 
				<a class="dock-item" href="#"><span>Link 3</span><img src="tabs_48.png" alt="Link 3" /></a> 
				<a class="dock-item" href="#"><span>Link 4</span><img src="newspaper_48.png" alt="Link 4" /></a> 
				<a class="dock-item" href="#"><span>Link 5</span><img src="mail_48.png" alt="Link 5" /></a>
			</div>
		</div>
	</div>
 
</body>
</html>

    As you can see the markup is pretty easy. I’ve setup a DIV that has a background color to give the menu something to “sit” on. This is called dockwrap. Inside of this DIV is another that is the main container for housing the menu, followed by the DIV for the dock itself. These are called dock and dock-container.

    Inside here we find a series of anchor tags with a class of dock-item. In each anchor is a span which will contain the title of the menu item, followed by the image that represents the menu item.

    And of course we had to include jQuery and the fisheye.js files for this all to work, naturally. :)

    Now we need to actually USE the plugin. The jQuery method is called Fisheye. It takes a number of parameters, many which I do not totally know what they do yet, but I will talk briefly about the important ones. Let’s see that code now.

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    	<script type="text/javascript">
 
		$(document).ready(function() {
 
			$('#dock').Fisheye({
				maxWidth: 60,
				items: 'a',
				itemsText: 'span',
				container: '.dock-container',
				itemWidth: 50,
				proximity: 60,
				alignment : 'left',
				valign: 'bottom',
				halign : 'center'
			});
 
 
		});
 
	</script>

    The first important parameter we see here is the items key. This tells the plugin what elements will actually be the menu items. We want anchor tags to be the menu items in our case. The next would be the itemsText key. This parameter specifies that the text seen over the image will be found in a SPAN tag. And most important of all is the container key, which will dictate what markup has the actual fisheye menu and items we wish to render.

    Go ahead and play around with it, and you will find it remarkably easy to use, and quite fun to put into your websites! Enjoy, and happy coding!

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

    <cfsetting showdebugoutput="false" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Example of jQuery Fisheye</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="description" content="Example of jQuery Fisheye" />
	<meta name="keywords" content="jquery,fisheye,example,code,coldfusion" />
	<meta name="author" content="Adam Presley" />
 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script type="text/javascript" src="fisheye.js"></script>
 
	<style type="text/css">
		.dockwrap { margin: 105px auto; width: 100%; background-color: #333; border: 1px solid black; }
		#dock { top: 0; width: 775px; margin: 0 auto; }
		.dock-container { position: relative; top: -8px; height: 50px; }
		a.dock-item { display: block; width: 50px; position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; }
		.dock-item span { display: none; padding-left: 20px; }
		.dock-item img { border: 0; margin: 5px 10px 0px; width: 100%; }
	</style>
</head>
 
<body>
 
	<p>
		Below is an example of using the Fisheye Menu interface from 
		<a href="http://interface.eyecon.ro" target="_blank">http://interface.eyecon.ro</a> 
		to build a sleek, snazzy menu similar in style to the Mac OS. I've
		also provided the minified version of the Fisheye JavaScript packaged up
		in a nice neat single-JS file for you <a href="fisheye.js">here</a>. 
	</p>
 
	<div class="dockwrap">
		<div id="dock">
			<div class="dock-container">
				<a class="dock-item" href="#"><span>Link 1</span><img src="home_48.png" alt="Link 1" /></a> 
				<a class="dock-item" href="#"><span>Link 2</span><img src="paper_content_48.png" alt="Link 2" /></a> 
				<a class="dock-item" href="#"><span>Link 3</span><img src="tabs_48.png" alt="Link 3" /></a> 
				<a class="dock-item" href="#"><span>Link 4</span><img src="newspaper_48.png" alt="Link 4" /></a> 
				<a class="dock-item" href="#"><span>Link 5</span><img src="mail_48.png" alt="Link 5" /></a>
			</div>
		</div>
	</div>
 
	<script type="text/javascript">
 
		$(document).ready(function() {
 
			$('#dock').Fisheye({
				maxWidth: 60,
				items: 'a',
				itemsText: 'span',
				container: '.dock-container',
				itemWidth: 50,
				proximity: 60,
				alignment : 'left',
				valign: 'bottom',
				halign : 'center'
			});
 
 
		});
 
	</script>	
</body>
</html>

    Demo: http://coldfusioncode.adampresley.com/fisheye/

    Related posts:

    1. Code for my Dallas TechFest 2010 Presentation Available
    2. Using jqGrid with ColdFusion
    3. Example of jQuery Autocomplete with ColdFusion

    ]]>     http://blog.adampresley.com/2010/fisheye-menu-with-jquery/feed/ 2     Example of jQuery Autocomplete with ColdFusion http://blog.adampresley.com/2009/example-of-jquery-autocomplete-with-coldfusion/ http://blog.adampresley.com/2009/example-of-jquery-autocomplete-with-coldfusion/#comments Tue, 22 Dec 2009 19:48:56 +0000 Adam Presley http://blog.adampresley.com/?p=728
  • Code for my Dallas TechFest 2010 Presentation Available
  • Using jqGrid with ColdFusion
  • Fisheye Menu with jQuery
    • ]]>     A useful feature, and high “value add” to many sites today is a text box with autocomplete and suggestion as you type. The powerful jQuery JavaScript library makes this really easy to do, especially with the help of the excellent autocomplete plugin from bassistance.de. In this example we will setup a page to search for people, with a text box, a hidden field to hold the ID of our selected person, and a submit button. The setup is pretty simple. Let’s take a look at that code.

    From here we need a little JavaScript magic to wire up our autocomplete. There are three items of concern. The first is just setting up the autocomplete on the text box. The next item is to make sure that when a selection is made our hidden field (which contains the person’s ID) is populated. The final area of concern is if the user blanks out the text box value, we want to reset our hidden field. Let’s look at the first part where we setup the autocomplete.

    1
2
3
4
5
6
7
8
9
10
11
12
13
14

    /*
 * Initialize the autocomplete. Will call ajax_searchPersons.cfm
 * and pass the variable "q" as the query.
 */
$("#searchPersonText").autocomplete("ajax_searchPersons.cfm", {
	width: 300,
	multiple: false,
	formatItem: function(row) {
		return row[1];
	},
	formatResult: function(row) {
		return row[1];
	}
});

    In that snippet we are telling the autocomplete control that it will retrieve its data from a ColdFusion page called “ajax_searchPersons.cfm”. Aside from a couple of basic configuration options, there are two options worth noting in detail. The first is the formatItem value. This configuration parameter takes a function, and is passed an array containing the key, and the value returned from the AJAX call. This is called to display the suggestion box. The next is the formatResult value. This function takes the same parameter, and dictates what displays in the text box when an item is selected.

    Now we need to populate our hidden field once a selection is made. This is done by calling the result method against our text box. It takes a function as an argument, with three parameters: event, data, and formatted text. The data argument is what we are interested in. Again this argument is an array with two values, the key, and the value. Let’s look at that.

    1
2
3
4
5
6
7

    /*
 * When an item is selected from the autocomplete
 * dropdown, set the selected ID into the hidden field.
 */
$("#searchPersonText").result(function(e, data, formatted) {
	$("#personId").val(data[0]);
});

    And finally we want to make sure that if the user blanks out the text box we reset the hidden field’s value to zero. To do this we will handle the onblur event. In this handler we’ll check the text box for a blank value. If it is blank, we will zero out the hidden field. Here is that code.

    1
2
3
4
5
6
7
8
9
10
11

    /*
 * When we blur off the text box we want to make sure
 * something is selected. If we've cleared it out zero
 * out the hidden field.
 */
$("#searchPersonText").blur(function(e) {
	if ($("#searchPersonText").val() === "") 
	{
		$("#personId").val("0");
	}
});

    Now let’s talk about the server side. The bassistance.de autocomplete plugin will pass a URL variable called “q” to a server side page, and expects a set of records delimited by a carriage return. Each record must have a key and value, delimited by a pipe. So, for example, if my ID is 1, and my name is “Adam Presley”, I will send back a record like this (without quotes): “1|Adam Presley”. This will be followed by a new line.

    I have a sample database with a table called “persons”, and I’ve populated it with sample data (provided below). This page will query that table for any records where the first name plus last name is like the search string passed in by the autocomplete JavaScript. We will then craft the pipe delimited records and spit it out onto the page. Here’s that code now.

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

    <cfsetting enablecfoutputonly="true" showdebugoutput="false" /><cfsilent>
 
<cfset local = structNew() />
 
<cfquery name="qryPersons" datasource="dsn">
	SELECT
		p.id
		, p.firstName
		, p.lastName
 
	FROM persons AS p
	WHERE
		(CONCAT(p.firstName, ' ', p.lastName) LIKE <cfqueryparam value="%#url.q#%" cfsqltype="cf_sql_varchar" />)
</cfquery>
 
<cfset local.output = "" />
<cfset local.crlf = "#chr(13)##chr(10)#" />
 
<!---
	This jQuery plugin requires the data to come back formatted like:
		key|value\n
--->
<cfloop query="qryPersons">
	<cfset local.output = local.output & "#qryPersons.id#|#qryPersons.firstName# #qryPersons.lastName##local.crlf#" />
</cfloop>
 
</cfsilent><cfoutput>#local.output#</cfoutput>

    Take a look at the demo page to see this code in action. As you can see this plugin is pretty easy to use, and powerful too. The code for all of this is below. Happy coding!

    index.cfm

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>jQuery Autocomplete Example</title>
 
	<link type="text/css" rel="stylesheet" href="jquery-autocomplete/jquery.autocomplete.css" />
 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" src="jquery-autocomplete/jquery.autocomplete.min.js"></script>
</head>
 
<body>
 
	<cfif structKeyExists(form, "btnSubmit")>
		<p><cfoutput>You searched for #form.searchPersonText# and found ID #form.personId#</cfoutput></p>
	</cfif>
 
	<p>
		Please type in the name of the person you are searching for.
		For example, try typing "sel", or "ja".
	</p>
 
	<form name="frmSearch" id="frmSearch" method="post">
		<input type="text" id="searchPersonText" name="searchPersonText" value="" />
		<input type="hidden" id="personId" name="personId" value="0" />
 
		<br />
		<input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" />
	</form>
 
	<script type="text/javascript">
 
		$(function() {
 
			var ExamplePage = function()
			{
				this.initialize = function()
				{
					/*
					 * Initialize the autocomplete. Will call ajax_searchPersons.cfm
					 * and pass the variable "q" as the query.
					 */
					$("#searchPersonText").autocomplete("ajax_searchPersons.cfm", {
						width: 300,
						multiple: false,
						formatItem: function(row) {
							return row[1];
						},
						formatResult: function(row) {
							return row[1];
						}
					});
 
					/*
					 * When an item is selected from the autocomplete
					 * dropdown, set the selected ID into the hidden field.
					 */
					$("#searchPersonText").result(function(e, data, formatted) {
						$("#personId").val(data[0]);
					});
 
					/*
					 * When we blur off the text box we want to make sure
					 * something is selected. If we've cleared it out zero
					 * out the hidden field.
					 */
					$("#searchPersonText").blur(function(e) {
						if ($("#searchPersonText").val() === "") 
						{
							$("#personId").val("0");
						}
					});
 
					$("#searchPersonText").focus();
				};
 
				this.initialize();
			}();
 
		});
 
	</script>
</body>
</html>

    ajax_searchPersons.cfm

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

    <cfsetting enablecfoutputonly="true" showdebugoutput="false" /><cfsilent>
 
<cfset local = structNew() />
 
<cfquery name="qryPersons" datasource="mysqlcf_cfexamples">
	SELECT
		p.id
		, p.firstName
		, p.lastName
 
	FROM persons AS p
	WHERE
		(CONCAT(p.firstName, ' ', p.lastName) LIKE <cfqueryparam value="%#url.q#%" cfsqltype="cf_sql_varchar" />)
</cfquery>
 
<cfset local.output = "" />
<cfset local.crlf = "#chr(13)##chr(10)#" />
 
<!---
	This jQuery plugin requires the data to come back formatted like:
		key|value\n
--->
<cfloop query="qryPersons">
	<cfset local.output = local.output & "#qryPersons.id#|#qryPersons.firstName# #qryPersons.lastName##local.crlf#" />
</cfloop>
 
</cfsilent><cfoutput>#local.output#</cfoutput>

    SQL Data

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209

    CREATE TABLE persons (
  `id` mediumint(8) UNSIGNED NOT NULL AUTO_INCREMENT,
  `personId` MEDIUMINT DEFAULT NULL,
  `firstName` varchar(255) DEFAULT NULL,
  `lastName` varchar(255) DEFAULT NULL,
  `email` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) TYPE=MyISAM AUTO_INCREMENT=1; 
 
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('1','Imogene','Coffey','nec.tempus.scelerisque@montesnascetur.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('2','Marsden','Mcbride','malesuada.malesuada.Integer@vitae.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('3','Jescie','Vang','neque.venenatis@ipsum.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('4','August','Hewitt','Nullam@MorbimetusVivamus.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('5','Raven','Gilmore','Sed@mollisInteger.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('6','Susan','Reyes','Proin.vel@Duiscursus.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('7','Maya','Soto','massa@bibendumDonecfelis.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('8','Wyatt','Nixon','Fusce.dolor.quam@Cum.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('9','Alfonso','Ochoa','nunc.In@nec.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('10','Kim','Price','massa.Mauris.vestibulum@Morbimetus.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('11','Selma','Wilder','nec@SeddictumProin.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('12','Luke','Maddox','Donec.porttitor@a.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('13','Fatima','Ramos','dui.semper@etrisus.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('14','Ivory','Lynch','dui@amet.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('15','Rebekah','Duke','id.libero@magna.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('16','Anjolie','Lester','placerat.orci.lacus@sem.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('17','Farrah','Mcmillan','venenatis.vel.faucibus@lobortisClass.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('18','Randall','Carrillo','posuere@egetvolutpatornare.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('19','Zane','Curtis','placerat.eget@elementumat.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('20','Nelle','Hunt','erat.eget@ornarelectusjusto.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('21','Aurora','Joyner','est.Mauris@id.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('22','Ivana','Rivera','luctus.et.ultrices@Donecfeugiatmetus.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('23','Macy','Hopkins','Donec.non.justo@acrisus.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('24','Brooke','Hart','a.feugiat.tellus@euodiotristique.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('25','Shaeleigh','Montgomery','ac@amet.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('26','Coby','Coffey','fermentum.metus@velarcueu.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('27','Sybill','Hunt','Fusce.mi@sapienNuncpulvinar.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('28','Kuame','Hawkins','nisl.Nulla@ornarelectusjusto.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('29','Martena','Monroe','est@odio.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('30','Harper','Rodriguez','dictum.magna.Ut@Fuscealiquetmagna.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('31','Valentine','Hebert','risus@temporestac.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('32','Quamar','Lindsay','nunc.sed@Aliquamtinciduntnunc.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('33','Olivia','Daniels','nulla.Integer@euduiCum.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('34','Brenden','Reeves','vehicula@etarcu.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('35','Kareem','Booker','vel.est@sagittisfelis.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('36','Giacomo','Wise','magna.Sed@feugiatLorem.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('37','Ivy','Tucker','at.augue@Aliquam.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('38','Yuri','Montgomery','erat.Sed@massalobortis.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('39','Vernon','Parsons','luctus.sit.amet@aliquameuaccumsan.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('40','Drew','Love','id@lobortisnisi.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('41','Amal','Oneal','est@duiCum.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('42','Oliver','Montgomery','pretium@Donec.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('43','Mechelle','Garcia','dictum.magna@sit.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('44','Ruby','Cline','non.arcu.Vivamus@famesacturpis.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('45','Dean','Riddle','libero.at@anteblandit.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('46','Andrew','Fox','eu.placerat@lacusvestibulumlorem.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('47','Clayton','Forbes','in@turpisIn.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('48','May','Sims','sodales.purus@quis.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('49','Phyllis','Kerr','sed@Phasellus.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('50','Odysseus','Holden','ligula@Sedeunibh.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('51','Minerva','Cooley','risus@rhoncusNullam.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('52','Brianna','Bentley','a@inaliquetlobortis.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('53','Virginia','Byrd','rhoncus.Donec.est@consequatdolor.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('54','Tana','Sykes','bibendum@arcu.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('55','Anthony','Mejia','cubilia.Curae;.Donec@euismodindolor.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('56','Fallon','Gamble','vel.arcu@idmagna.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('57','Emily','Dyer','dolor.egestas@ametornare.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('58','Ahmed','Hewitt','sem.semper@Praesent.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('59','Maisie','Peterson','commodo.auctor.velit@senectuset.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('60','Cally','Sexton','convallis@Mauris.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('61','Kevyn','Webster','neque@magna.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('62','Logan','Sykes','urna@pede.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('63','Macaulay','Ford','Cras@ac.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('64','Grady','Rose','enim.gravida@Mauriseu.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('65','Rashad','Rogers','et.magnis.dis@elementumpurusaccumsan.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('66','Wing','Mcdonald','Mauris@vehiculaPellentesque.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('67','Rebekah','Wallace','sollicitudin.orci.sem@elit.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('68','Derek','Owen','erat.eget@Fuscediam.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('69','Brenda','Goff','luctus@in.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('70','Stuart','Wise','Donec.elementum@metusAenean.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('71','Andrew','Walker','neque.non@pharetranibhAliquam.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('72','Blaine','Barker','lorem.auctor.quis@miloremvehicula.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('73','Cooper','Hughes','nec@arcuVestibulumante.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('74','Victoria','Craft','In.at@Nulla.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('75','Portia','Levine','mauris@idlibero.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('76','Gage','Vargas','vel.est.tempor@vulputateveliteu.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('77','Myra','Gaines','ipsum.nunc.id@etnuncQuisque.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('78','Lavinia','Cannon','sociis.natoque@elitpharetra.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('79','Kelsey','Sharpe','nisl.arcu.iaculis@tinciduntpede.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('80','Savannah','Nash','Maecenas.libero.est@loremsit.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('81','Kelsey','Justice','Fusce.fermentum@NullafacilisiSed.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('82','Leigh','Byrd','sem.molestie@ultrices.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('83','Lynn','Sears','ipsum@laoreetposuere.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('84','Alice','Atkinson','in.cursus@feugiatnecdiam.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('85','Desiree','Wise','a.mi@tristiquesenectus.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('86','Dorothy','Farrell','blandit@arcuSed.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('87','Mira','Hawkins','nibh.Aliquam.ornare@In.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('88','Tana','Pearson','dapibus.gravida.Aliquam@risusvariusorci.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('89','Idola','Quinn','parturient.montes.nascetur@magnaseddui.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('90','Chester','Levine','dui.Fusce@egetmagnaSuspendisse.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('91','Conan','Cochran','et.commodo@orciPhasellus.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('92','Roary','Roberson','velit.in@ultricessit.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('93','Cynthia','Walton','et.magnis@orciluctuset.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('94','Howard','Pacheco','lobortis.tellus.justo@Nunc.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('95','Amanda','Wells','Class.aptent@eget.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('96','Oleg','Sanford','nibh.vulputate@pharetrased.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('97','Axel','Jacobson','non.feugiat.nec@tacitisociosqu.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('98','Belle','Keller','Donec@metus.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('99','Ian','Harvey','elementum@enimEtiam.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('100','Joshua','Goff','urna.suscipit.nonummy@elit.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('101','Phillip','Clarke','lorem.ut.aliquam@sagittisaugue.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('102','Ann','Briggs','eros@scelerisqueneque.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('103','Ramona','Johnson','lorem.semper.auctor@Sedetlibero.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('104','Dai','Maldonado','primis.in@egetdictumplacerat.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('105','Aristotle','Ingram','eu.sem.Pellentesque@Aliquamnisl.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('106','Elaine','Leonard','dui.semper.et@idenim.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('107','Cruz','Flynn','Curabitur@vulputateposuerevulputate.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('108','Maryam','Townsend','risus.a.ultricies@eudolor.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('109','Gregory','Kelley','vestibulum.neque@aptenttacitisociosqu.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('110','Lila','Weaver','tempor.lorem.eget@acorci.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('111','Brady','Mendez','ac.libero.nec@egetmollislectus.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('112','Naomi','Schneider','rhoncus.Nullam@semegetmassa.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('113','Charlotte','Moses','turpis.nec.mauris@malesuada.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('114','Benedict','Mueller','rhoncus@tempordiam.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('115','Azalia','Sheppard','semper.auctor.Mauris@Nullamenim.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('116','Hadassah','Hobbs','dapibus.quam.quis@sed.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('117','Yasir','Sheppard','at.sem@purusDuis.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('118','Maite','Singleton','in.faucibus.orci@miac.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('119','Blaine','Bennett','Nulla@eusemPellentesque.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('120','Grace','Graham','luctus.et.ultrices@risusatfringilla.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('121','Alice','Dillon','Integer@velit.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('122','Lane','Everett','lobortis.risus.In@hendrerit.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('123','Maggie','Lamb','Curae;.Donec@aliquetdiam.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('124','Jermaine','Cline','ut@semconsequat.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('125','Fiona','Bean','lorem.ac@sed.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('126','Hamilton','Grimes','non.lobortis@Integerin.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('127','Quentin','Acosta','est@utodio.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('128','Basia','Russell','Vestibulum@Seddiamlorem.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('129','Kato','Mcmillan','non.quam.Pellentesque@disparturient.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('130','William','Stone','mus.Proin@non.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('131','Tad','Klein','eget.magna@Cumsociis.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('132','Alec','Welch','odio@necurnasuscipit.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('133','Patrick','Mccormick','ut@Phasellus.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('134','Shoshana','Harmon','a@ultrices.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('135','Kameko','Weeks','velit.Sed@semegestas.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('136','Xavier','Haley','eget@perconubia.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('137','Beau','Juarez','iaculis.lacus.pede@Phasellus.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('138','Diana','Walls','dolor@sagittis.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('139','Lester','Hays','nunc@etrutrum.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('140','Ruby','Griffin','Etiam.laoreet@etmagnisdis.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('141','Aubrey','Tyson','consequat.purus.Maecenas@penatibuset.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('142','Jasper','Maddox','Donec@ligulaconsectetuer.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('143','Russell','Stevens','leo.Cras.vehicula@volutpat.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('144','Mannix','Guzman','porttitor@nonmagnaNam.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('145','Jerry','Daniels','blandit@id.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('146','Keiko','Mccoy','Lorem.ipsum.dolor@habitant.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('147','Marah','Cole','purus.Duis@egestas.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('148','Galvin','Downs','odio.auctor@Crasvehicula.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('149','Graiden','Workman','augue.eu.tempor@velit.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('150','Gemma','Mcintosh','tincidunt@morbi.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('151','Forrest','Osborn','a.arcu@risusInmi.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('152','Violet','Mccormick','risus@tortorNunccommodo.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('153','James','Briggs','eleifend.egestas.Sed@sodales.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('154','Erich','Barber','ridiculus@ataugue.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('155','Roth','Austin','cursus.a@lacusQuisquepurus.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('156','Lev','Dalton','mauris.sagittis@felisegetvarius.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('157','Maris','Kramer','Nunc@scelerisquedui.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('158','Nina','Bowers','nec.urna@Aenean.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('159','Phyllis','Scott','Donec@interdumligulaeu.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('160','Lacy','Mcleod','Duis.gravida.Praesent@Vivamuseuismodurna.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('161','Maite','Cline','In.faucibus@uterosnon.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('162','Eve','Frazier','lacus@variuset.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('163','Kasper','Lott','vehicula.Pellentesque.tincidunt@Aliquamerat.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('164','Cora','Hutchinson','et.tristique@neque.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('165','Tara','Pugh','Quisque.fringilla@elementumsemvitae.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('166','Macy','Peters','velit@tortor.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('167','Imani','Guerrero','ac.feugiat.non@bibendumfermentummetus.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('168','Echo','Leonard','eu@sapienCrasdolor.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('169','Aretha','Austin','mauris@pedeetrisus.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('170','Nathaniel','Barnett','condimentum@purusDuiselementum.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('171','Rebekah','Wallace','Mauris@Duis.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('172','Colorado','Santos','tellus.Suspendisse@quisaccumsan.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('173','Garrison','Brady','egestas@rutrum.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('174','Tallulah','Holland','id.ante.Nunc@nonlorem.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('175','Dalton','Mccray','vestibulum@montesnascetur.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('176','Sage','Keller','a.scelerisque@a.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('177','Maya','Dunlap','accumsan.interdum@netuset.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('178','Jemima','Hart','quam.a.felis@Donecnonjusto.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('179','Erasmus','Pratt','mauris.sagittis.placerat@neque.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('180','Shannon','Franklin','Curabitur.vel.lectus@utmolestiein.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('181','Blake','Adkins','interdum@risus.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('182','Lysandra','Myers','nisi@ac.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('183','Sybill','Little','elit.dictum@Vestibulum.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('184','Linda','Cortez','nulla@nequeNullam.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('185','Faith','Ferguson','dolor.elit.pellentesque@ut.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('186','Kieran','Underwood','nulla.at.sem@pellentesqueSed.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('187','Madonna','Barnett','et.rutrum.eu@interdumenim.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('188','Shelley','Frederick','Sed.auctor@etmagnis.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('189','Alexis','Ratliff','consectetuer@volutpat.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('190','Ferris','Williamson','eros.Proin.ultrices@euismodetcommodo.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('191','Jameson','Aguilar','interdum@non.org');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('192','Madeson','Berger','tortor@musDonec.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('193','Tanner','Greer','dolor.dapibus.gravida@nunc.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('194','Callie','Puckett','dui@Aliquamgravidamauris.com');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('195','Lucius','Spears','Fusce.aliquet@montesnasceturridiculus.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('196','Troy','Miranda','dictum.ultricies.ligula@convallisdolorQuisque.edu');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('197','Athena','Patton','et.libero.Proin@consectetuer.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('198','Chase','Mullins','Quisque@aaliquet.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('199','Brenda','Cantu','faucibus@amet.ca');
INSERT INTO `persons` (`personId`,`firstName`,`lastName`,`email`) VALUES ('200','Steven','Castaneda','Etiam.laoreet.libero@orciconsectetuereuismod.com');

    Related posts:

    1. Code for my Dallas TechFest 2010 Presentation Available
    2. Using jqGrid with ColdFusion
    3. Fisheye Menu with jQuery

    ]]>     http://blog.adampresley.com/2009/example-of-jquery-autocomplete-with-coldfusion/feed/ 1