如何制作简单的类似自动完成的 DIV，对输入元素的焦点/模糊事件做出反应

Question

>我有这个简单的场景（为了这个问题而简化）：

<input type="text" id="input">
<div id="autocomplete">.. some links..</div>
<script>
  $('#input').bind('focus', function(){
    $('#autocomplete').show();
  }).bind('blur', function(){
    $('#autocomplete').hide();
  });
</script>

我想要实现的是：

1. 当用户单击文本输入时，将显示自动完成功能。
2. 当用户单击自动完成 DIV 中的任何内容时，它将保持可见
3. 当用户单击输入和自动完成之外的任意位置时，自动完成将消失。

我怎样才能做到这一点？特别是我正在寻找关于第二点的答案，因为它必须很容易实现。

提前感谢您的帮助。

Answer 1

如果我

错了，请纠正我，但我相信您的代码适用于要求 #1 和 #3，但不适用于 #2：

当用户单击自动完成 DIV 中的任何内容时，它将保持可见

这是因为单击div 会导致输入字段失去焦点，因此模糊代码会立即隐藏div。这意味着不能使用 blur 事件来隐藏div。您可以在document上绑定到click。在处理程序中，您必须检查是否应该隐藏div：

$(document).click(function(e){
    var inputFocused = $('#input').is(':focus');
    var clickedInsideAcDiv = $(e.target).closest('#autocomplete').length > 0;
    if(!inputFocused && !clickedInsideAcDiv) {
        $('#autocomplete').hide();
    }
});

我不确定这是否会解释您实际页面上的所有内容，但我希望这个想法很清楚。

Answer 2

我知道自己将所有

内容组合在一起很酷，但您可能想看看这个jQuery自动完成插件：http://jqueryui.com/demos/autocomplete/

更新

<script>
  $('#input').bind('focus', function() {
    $('#autocomplete').position($(this).position()); //Adjust this accordingly depending on where you want the autocomplete div to show up.
    $('#autocomplete').show();
  }).bind('blur', function(){
    $('#autocomplete').hide();
  });
</script>

.CSS：

<PARENT_OF_#autocomplete> {
    position: relative; /* Anything other than static or default one */
} 
#autocomplete {
    position: absolute;
}