jQuery autocomplete - mouse click result, input does not lose focus

Question

In the autocomplete result list. How do I capture the click event? Currently results are links. When clicked they open a new window with the embedded url but when this happens the autocomplete doesn't lose focus and the result box gets stuck open. It stays open even when the user comes back and clicks anywhere on the page. the only way to make it lose focus is to click inside the input box and then click back out.

It looks like opening the new window loses focus from the input box but does not fire off a blur() event.

I was thinking if I could capture the click event I could just manually trigger a .blur() but I was unsuccessful at my attempts using the class for the list elements $("li") or their css names $(".ui-menu"). I also tried in the autocomplete Select event but that didn't do anything.

This looks like it might be a solution: http://jeremydorn.blogspot.com/2010/04/fixing-jquery-ui-autocomplete.html

But I was hoping for something more elegant.

Thanks

Answer 1

Why don't you give the links a click handler that closes the autocomplete ?

For example:

$("a.autocompleteLink").click(function() {
    $("input.autocomplete").autocomplete("close");
});