javascript - 专注于输入表单和 div

Question

我正在尝试制作一个下拉建议框。在那种情况下，我希望在输入字段和下拉框不再处于焦点时隐藏该框。

这是我的 HTML 代码:

<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>

我尝试了以下方法:

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

为什么当我在页面上选择另一个输入字段或其他元素时 user_address_sg 没有隐藏？

图像(第一个:当我写一个名字时，第二个:当我选择另一个表格时出现建议)

第一张图片:建议框应显示并可点击

第二张图片:执行此操作时建议框应该消失

Answer 1

更新: CSS 替代方案:

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>