专注于输入表单和 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 不隐藏？

图片（第 1 次：当我写名字时，第 2 次：当我在出现建议时选择另一个表单时）

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

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

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>

Answer 2

您可能需要blur 并用逗号分隔选择器，因为不存在具有两个不同 id 的单个元素，但是具有不同 id 的两个不同元素是存在的。所以把它们分开：

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

on() 方法更好

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

blur 事件将在焦点元素失去焦点时触发。所以我认为这就是你所需要的。