Geeky Stuff that isn't my novels

Setting up jQuery Autocomplete with Coldfusion back-end

In my current project, I’ve been presented with a fairly simple problem. My end-users need to be able to populate custom instructions for customer delivery sites. For example, one sight might have an instruction: ” do not stack.” Another might have an instruction that says: “pallet jack needed.” Or “height: 180cm”. Whatever. I don’t have any way of knowing in advance what those instructions might be, though they’ll be common among various customers.

The constraint is, the existing tables in the back end database can’t be touched because they are from a COTS application. My tables have to exist separately and in parallel.

I’ve decided to set up a table of custom instructions, with a linking table that links the customer address record to the custom instruction record. But I need a page to manage that.

For my shipping managers I’m setting up a very simple management page. The first step is they’ll want to be able to easily search for customers. I’m implementing that using jQuery autocomplete–kind of like when you start typing in Google and it starts giving you suggestions before you’ve finished typing.

I’m working on a complicated app which has grown over a number of years, so several version of jQuery sit on the server. I’m keeping things simple–I’m using the most recent version of jQuery off the CDN.

The javascript. I had some challenges here. Specifically, I want the search box to display a customer name so they can easily be selected, but I wanted to pass a value — specifically, a company ID — back to the page which I could use for further processing.

On the server end, my CFC grabs the appropriate data, packages it in a json packet and sends it back:

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<cffunction name="getCustomerName"access="remote"output="yes">

<cfargument name="term"type="string"required="yes">

<cfset varreturnArray=ArrayNew(1) />

<cfquery name="getCustomer"datasource="#DSN#">

select cust_num,cust_seq, name, address1, city, state

from custaddr

where name like <cfqueryparam cfsqltype="cf_sql_varchar"value="%#arguments.term#%">

This sends out a nicely formatted JSON packet which populated the autocomplete with label/value pairs. Unfortunately, it seemed like no matter what I did, the search field was populated by the value, not the label. That was a problem, and it took far longer to solve than it should have.

Here was the javascript:

JavaScript

1

2

3

4

5

6

7

8

9

$("input#getCustomerName").autocomplete({

source:"myCFC.cfc?method=getCustomerName",

minLength:2,

select:function(event,ui){

$("#label").text(ui.item.label);

$("#companyID").val(ui.item.value);

$(this).val(ui.item.label);

}

});

This should work (I thought). I was able to get the data from my CFC, the autocomplete populated, but the input stubbornly showed the value, even though I had the line $(this).val(ui.item.label); setting the value of the field.

It turned out, after a surprisingly long time, that I needed to set return false in order to make that work. The new line looks like this:$(this).val(myLabel); return false;
That disables the default action (to show the value), then I manually set the property on the box and all was good.