Hide AutoFill Suggestion List AJAX Control on Blur

Question

I use AJAX "autosuggest": the user enters a line in the input text box, a hidden div with a table is displayed, and then he can click on the line or scroll the list up / down arrows; in the meantime, focus is still in the input text box.

Everything works mostly fine, but there are details that I cannot implement that seem conceptually difficult or even impossible. I would like to hide the list of offers when the user moves the cursor to another input field or simply clicks on an empty point in the window. This is not difficult to do on its own, I just added calback OnBlur; but this violates the selection of the OnClick element, since the onblur event is fired before the click, and then the DIV disappears before the onclick event is fired ...

I thought about implementing an onclick callback for the whole window, and then checking where the click occurred, but this seems too awkward and distorted. Anyone have a better idea? Thanks!

Answer 1

I worked on the same problem and came up with the following solution. The Autosuggest list has hidden the onclick of the document, which also works in IE (window.onclick does not work in IE).

document.onclick = function(ev) { this.hideAutosuggestListDiv(); }; this.hideAutosuggestListDiv = function() { this.div.style.display = 'none'; }; 

Answer 2

I had a simulated problem, but came up with a slightly different solution:

 document.onclick = closeSuggest; function closeSuggest() { document.getElementById('suggestions').style.display = "none"; } function catchTAB(event) { if(event.keyCode ==9) { closeSuggest(); document.getElementById('ELEMENT').focus(); //the element that is currently focused } } 

Hope this helps

Answer 3

I am currently trying to solve the same problem.

Partial Solution:

Use the function to wait a split second before clearing DOS.

 function pause(milliseconds) { var dt = new Date(); while ((new Date()) - dt <= milliseconds) { } } onBlur="pause(500);clearAutosuggestBox()" 

However, this solution is not elegant and does not work in all browsers.

When looking at some of the popular autoload mailboxes, I did not come across what makes information about the auto-resource inaccessible when you click on it from the outside, but usually go out and disappear.

Good luck.

Answer 4

For those working with jquery, the focusout event trigger works focusout fine for this:

 $('#input-box').focusout(function() { $('#suggestions').fadeOut(); });