在输入表单和div上聚焦

Question

I'm trying to make a dropdown suggestion box. In that case I wish to hide the box whenever the input field AND dropdown box is no longer in focus.

This is my HTML code:

<input type="text" id="user_address">
<div id="user_address_sg">SUGGESTION</div>

<div id="another element">Pressing another element on the page should hide the suggestion box</div>

I have tried the following:

$('[id=user_address][id=user_address_sg]').focusout(function (){
    $('#user_address_sg').hide();
});

How come the user_address_sg doesn't hide whenever I select another input field or other elements on the page?

Images (1st: When I write a name, 2nd: When I select another form while suggestions appear)

First image: suggestion box should be displayed and clickable

Second image: When doing this the suggestion box should disappear

Answer 1

UPDATED: CSS alternative:

 function suggest(key) { document.getElementById('user_address').value = document.getElementById(key).innerHTML; } 

 #user_address_sg { vertical-align: top; text-decoration: none; display: none; color:black; } #user_address_sg:focus, #user_address_sg:active { display: inline-block; color:black; } #user_address:focus ~ #user_address_sg { display: inline-block; } 

 <input type="text" id="user_address"> <a href=# id="user_address_sg"> <span id=a1 onClick="suggest('a1')">SUGGESTION 1</span><br> <span id=a2 onClick="suggest('a2')">SUGGESTION 2</span><br> <span id=a3 onClick="suggest('a3')">SUGGESTION 3</span><br> <span id=a4 onClick="suggest('a4')">SUGGESTION 4</span> </a> 

Answer 2

You may need blur and separate the selectors with commas, because one single element with two different ids doesn't exist, but two different elements with different ids yes. So separate them:

$('[id=user_address],[id=user_address_sg]').blur(function (){
    $('#user_address_sg').hide();
});

Better with on() method

$('[id=user_address],[id=user_address_sg]').on('blur', function (){
    $('#user_address_sg').hide();
});

blur event will fire when a focused element loses the focus. So I think that's what you need.