Multiple Jquery ui autocomplete on one page - jquery-ui

Question

I'm using the jQuery UI Autocomplete. I'm using it on three different input. So I have:
input id 1
autocomplete with xml data 1
input id 2
autocomplete with xml data 2
input id 3
autocomplete with xml data 3
I also have an event like this:
$(".ui-autocomplete li a").live("click",function(){
doSearch($(this).text());
});
The problem is that this event takes place on all three of the autocomplete.
What do I have to change in the event code or elsewhere to bind the event to a specific input/autocomplete. So I want to have event 1, 2, 3 corresponding to the different sets of input/autocomplete.

Answer 1

If I understand your question correctly, you want to pass either the autocomplete element or its index to doSearch(), in addition to the item text.
Passing the autocomplete element is as simple as using closest():
function doSearch(autocomplete, itemText)
{
// ...
}
$(".ui-autocomplete li a").live("click", function() {
var $this = $(this);
doSearch($this.closest(".ui-autocomplete"), $this.text());
});
Passing its index is a little trickier and can be achieved with index():
function doSearch(autocompleteIndex, itemText)
{
// ...
}
$(".ui-autocomplete li a").live("click", function() {
var $this = $(this);
doSearch($this.closest(".ui-autocomplete").index(".ui-autocomplete"),
$this.text());
});
Note in passing that bind(), delegate() and live() have been superseded by on() since jQuery 1.7, so you might want to use it to register your handler:
$(document).on("click", ".ui-autocomplete li a", function() {
// ...
});
If your autocomplete elements have a common non-dynamic ancestor, you can also apply on() to that element instead of document to gain a little performance.