Using jQuery UI Autocomplete with Hidden ID's

The new autocomplete widget in jQuery UI 1.8 is a nice addition. While it works great for basic purposes working with ID / value pairs is not so nice out of the box.

I wanted to use the autocomplete widget to allow someone to select an employee by typing in an employee name into the text box, but I want the form to post the ID of the employee, not the employee name.

First you need to setup your server side search script, I'm using ColdFusion here:

<cfparam name="url.term" default="">
<cfset emp = empDAO.searchByName(url.term)>
<cfset result = ArrayNew(1)>
<cfoutput query="emp">
	<cfset s = StructNew()>
	<cfset s["label"] = emp.FullName>
	<cfset s["value"] = emp.EE_ID>
	<cfset ArrayAppend(result, s)>
</cfoutput>
<cfset json = SerializeJSON(result)>
<cfcontent reset="true" type="application/json"><cfoutput>#json#</cfoutput><cfabort>

The jQuery UI autocomplete widget sends a variable in the query string called term which contains the text the user has typed in. You need to return an array of objects in JSON. For example, your output might look like this:

[{label:"Pete Freitag", value:1}, {label:"Pete Doe", value:2}]

Now the HTML code I am using in the form simply looks like this:

<input type="text" name="EmployeeID" value="" class="employeeAutocomplete" />

Next I need to write some jQuery JavaScript that applies the autocomplete widget to any input tag with the employeeAutocomplete, this code would go in your $(document).ready() event handler:

$('input.employeeAutocompete').autocomplete({source:'employee-search-json.cfm'});

Now this works well up to this point, but when I select an item it put's the employee ID in the text box. From the user perspective this doesn't make any sense. What I want is for the employee's name to be put in the text box, and have a hidden field containing the employee ID passed in the form.

So to accomplish that I need to do a bit more JavaScript, I'm going to do the following:

1. Change the name on the existing input field to whatever it was plus _autocomplete_label
2. Create a hidden input field with a name attribute value of the original input element (this will contain my ID value).
3. Create a custom select event handler for the given jQuery UI autocomplete instance.

So here's my new code:

$('input.employeeAutocomplete').each(function() {
	var autoCompelteElement = this;
	var formElementName = $(this).attr('name');
	var hiddenElementID  = formElementName + '_autocomplete_hidden';
	/* change name of orig input */
	$(this).attr('name', formElementName + '_autocomplete_label');
	/* create new hidden input with name of orig input */
	$(this).after("<input type=\"hidden\" name=\"" + formElementName + "\" id=\"" + hiddenElementID + "\" />");
	$(this).autocomplete({source:'employee-search-json.cfm', 
		select: function(event, ui) {
			var selectedObj = ui.item;
			$(autoCompelteElement).val(selectedObj.label);
			$('#'+hiddenElementID).val(selectedObj.value);
			return false;
		}
	});
});

Now when I submit the form the value of the EmployeeID field will be an employee ID, and the text box will simply show the employee name.

Would be cool if this widget supported an option to do what I just did, but it only takes a few additional lines of code to accomplish.