Hiding the suggestion list of an autocomplete AJAX control on blur

Question

I am implementing an AJAX "autosuggest" box: the user types a string in an input text field, a hidden div with a table is shown, and then he/she can click on a row or scroll the list with the up/down arrows; in the meantime, the focus is still kept on the input text field.

Everything works mostly fine, but there is a detail which I am not able to implement, which seems conceptually difficult or even impossible. I would like to hide the suggestion list when the user moves the cursor to another input field, or just clicks on an empty point of the window. This is not difficult to achieve by itself, I just added a calback OnBlur; but this breaks the selection of the item OnClick, since the onblur event is triggered before the click, and then the DIV disappears before the onclick event gets triggered...

I thought about implementing an onclick callback on the whole window, and then check where the click occurred, but this seems a bit too awkward and contorted. Does anybody have a better idea? Thanks!

Did you ever figure this out? I'm having this issue right now and can't figure out a good solution to allow onBlur to fire without breaking the clear or mouse click selections... — kgstew, Feb 05 '16 at 02:05
can anybody answer to this question, I am having the same problem. — Abhishek Kamal, Aug 29 '20 at 09:51
I used a trick by adding `setTimeout` when "autosuggest" box hides by `blur` event. _But this trick has a problem of `active` element of autosuggest box._ — Abhishek Kamal, Aug 29 '20 at 10:02

score 2 · Answer 1 · edited Oct 17 '12 at 07:25

2

I was working on the same issue and came up with following solution. Autosuggest list made hidden onclick of document which also works in IE(window.onclick does not works in IE).

document.onclick = function(ev) 
{
    this.hideAutosuggestListDiv();
};

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

edited Oct 17 '12 at 07:25

Smamatti

3,901
3
32
43

answered Oct 17 '12 at 07:21

Bharat Darakh

325
4
11

score 1 · Answer 2 · answered Feb 08 '14 at 15:38

1

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

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

answered Feb 08 '14 at 15:38

Varun Jain

1,901
7
33
66

score 1 · Answer 3 · edited Jul 02 '12 at 08:14

1

I had a simular problem but came up with a bit of a 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

edited Jul 02 '12 at 08:14

Dan Atkinson

11,391
14
81
114

answered Jun 22 '11 at 05:18

Jeff

11
1

score 0 · Answer 4 · answered May 05 '11 at 19:07

0

I am currently trying to solve the same problem.

Partial solution:

Use a function to wait a fraction of a second before you clear the autosuggest DIV

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

onBlur="pause(500);clearAutosuggestBox()"

However, this solution is not elegant and it doesn't work in all browsers.

In looking at some of the popular autosuggest boxes, I have not come across one that makes the autosuggest info go away when you click outside, rather they usually time out and disappear.

Best of luck.

answered May 05 '11 at 19:07

Nathan Lippi

4,967
5
25
29

I agree, it's not very elegant, still, less awkward and easier than my idea of the "onclick" on the full window... Why do you think it won't work in all browser?... – Francesco Marchetti-Stasi May 06 '11 at 11:55
Hi, just saw your response... well, I tried this solution a few days ago, and it seemed to work on all browsers except one (sorry, I don't remember which)... also, if someone's computer is slow, the pause time would have to be longer. – Nathan Lippi May 09 '11 at 02:47

Hiding the suggestion list of an autocomplete AJAX control on blur

4 Answers4