I have a Autocomplete list that generates a pop-up DIV when the user navigates up and down the typeahead list, either via the mouse or the keyboard. I'm using Autocomplete's "focus:" parameter to trigger this pop-up, and it's working fine.
However, there doesn't seem to be any reverse of "focus:" - something like "blur:" - which would be triggered when the user exits an item in the typeahead list. So, my pop-up DIV is left stranded in space, unless I take external steps to hide it.
Those "external steps" are to use a .live() call to set a mouseout handler on the typeahead's UL, which I'm selecting via it's "ui-autocomplete" class, i.e.:
$(".ui-autocomplete").live( 'mouseout', function (event) {
$("div#divToolTip")
.stop(true,true)
.hide(0);
});
That handles it for a mouse exit. I then have a .bind() to the input field itself (id="Name") to hide the tooltip div when that field loses focus. This handles any keyboard-triggered exit from the typeahead list:
$("input#Name").bind('blur', function (){
globalObj.nameFieldHasFocus = false; // Use global variable to track the focus. Yuk!
$("div#divToolTip")
.stop(true,true)
.hide(0);
});
You can see that I'm using a global variable to track whether the Name field has the focus or not. That entails another .bind() to set the global tracking variable to true when the Name field gains the focus:
$("input#Name").bind('focus', function (){
globalObj.nameFieldHasFocus = true;
});
As I said, all this is working fine, but I can't help thinking that there must be a more elegant way of doing it.
Any suggestions?