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>

我想要实现的目标是：

当用户点击文字输入时，会显示自动填充功能。
当用户点击自动填充DIV中的任何内容时，它会保持可见
当用户点击输入和自动填充之外的任何地方时，自动填充功能会消失。

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

提前感谢您的帮助。

Answer 1

如果我错了，请纠正我，但我相信你的代码适用于要求＃1和＃3，但不是＃2：

当用户点击自动填充DIV中的任何内容时，它会保持可见

这是因为点击div会导致输入字段失去焦点，因此模糊代码会立即隐藏div。这意味着您无法使用blur事件隐藏div。您可以绑定click上的document。在处理程序中，您必须检查是否应该隐藏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;
}

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

2 个答案: