Linking Two (or more) jQuery Autocompletes

This post is more than 2 years old.

A few weeks ago I wrote a blog post on jQuery UI's autocomplete control. I found it to be simple and powerful - both pretty typical for jQuery.

One of my readers, Srinivas, asked an interesting question in the comments. He wanted to know if it was possible to use the value of one autocomplete control in the source of another. My initial solution was to simply make the source point to the value of that control. However, this had a pretty obvious flaw. Here is the code Srinivas used, and see if you can find the issue:

$(function() { $("#department").autocomplete({ source: "test2.cfm" }); $("#location").autocomplete({ source: "test2.cfm?department="+$("#department").val() }); });

This technically works as written, but not as expected. (Well, not to my slow mind at first.) The problem with this code is that it runs once - on start up. So when the document loads, I first create an autocomplete on department and then a second one, immediately, on location. So at the time of the page loading, the department value is probably blank. (It's possible the HTML has a predefined value.) Obviously that isn't what we wanted. Let's look at a modified version.

$(function() { $("#department").autocomplete({ source: "test2.cfm?vType=department", select:function(event,ui) { var sel = ui.item.value $("#location").autocomplete("option","source", "test2.cfm?vType=location&department="+escape(sel)) } }); $("#location").autocomplete({ source: "test2.cfm?vType=location&" }); });

In this one we've used the select attribute for the first autocomplete to tell jQuery to run a function when a value is selected. I then use the autocomplete API to update the source option for that control to include the value that was selected.

That by itself is probably good enough, but it only works with auto complete selections. You may want to monitor all changes to the control. Here is another modified version that will handle it. It can probably be done even slimmer.

$(function() { $("#department").change(function(e) { $("#location").autocomplete("option","source", "test2.cfm?vType=location&department="+$(this).val()) }) $("#department").autocomplete({ source: "test2.cfm?vType=department", select:function(event,ui) { var sel = ui.item.value $("#location").autocomplete("option","source", "test2.cfm?vType=location&department="+escape(sel)) } }); $("#location").autocomplete({ source: "test2.cfm?vType=location&" }); });

Finally - note that this example makes use of the string value from the initial autocomplete. Don't forget that jQuery UI's autocomplete control allows you to return both a label and a value (like a primary key). So you could modify this code to pass a primary key instead of a string.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Mike posted on 4/27/2010 at 9:44 PM

Is this is the autoComplete plugin for jQuery? I use the 'extraParams' argument in mine:

$("#mfg").autocomplete(
"autodata.cfm",
{
extraParams: {part:"no"},
minChars:3,
delay:200,
autoFill:false,
matchSubset:false,
matchContains:1,
selectOnly:1
}
);

$("#part_number").autocomplete(
"autodata.cfm",
{
extraParams: {mfg: function() { return $("#mfg").val();},
part:"yes"

},
minChars:3,
delay:200,
autoFill:false,
matchSubset:false,
matchContains:1,
selectOnly:1
}
);

Comment 2 by Mike posted on 4/27/2010 at 9:47 PM

Nevermind - I'm using a different plugin:

http://docs.jquery.com/Plug...

Comment 3 by Sean Corfield posted on 5/8/2010 at 9:08 AM

@Mike, yes, I was using Dan Switzer's autocomplete plugin and found that the new jQuery UI plugin doesn't have anywhere near the number of options and cannot be customized as easily. I think the jQuery UI is a big step back...

The one thing the jQuery UI plugin has that Dan's doesn't is the ability to popup suggestions without data input. I managed to add that to Dan's plugin today so I'll be talking to him about it next week.

Comment 4 by Henry posted on 11/23/2011 at 1:43 PM

Hi, I'm trying to do something similar. So far without success. Any help would be appreciated.

I have a basic autocomplete returning and setting an id. In turn I want this id to drive another query/method of which I want to output the results on screen.

So it goes like this... Input and select a username from autocomplete drop list. The returned userid drives another query. The results of this query are then looped through and output the display of radio button options available for the selected user. Is this possible?

This is the autocomplete code I'm using

$(function() {
$("#userName").autocomplete({
source: "/jqueryui/com/autocomplete.cfc?method=getUser&returnformat=json",
//setup hidden fields
select:function(event,ui) {
$("#userid").val(ui.item.id)
}
});
});

Thanks

Comment 5 by Raymond Camden posted on 11/23/2011 at 5:15 PM

Yep, anything is possible. :)

I'd make use of the select feature, as you did there. Right now you just set the user id. You would _also_ fire off the XHR request to get the related data.