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.