0

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

<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. 当用户点击输入和自动完成之外的任何地方时，自动完成就会消失。

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

提前谢谢你的帮助。

4

2 回答 2

1

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

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

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

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

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

于 2012-05-07T17:00:32.147 回答
0

我知道自己破解所有东西很酷，但你可能想看看这个 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;
}
于 2012-05-07T16:21:02.407 回答