Question

我正在实施＆＃34;自动建议功能＆＃34;。这意味着：

输入元素获得焦点 - ＆gt;显示建议
输入元素失去焦点 - ＆gt;隐藏建议

但是如果用户想要通过鼠标选择一个选项，则不会触发click事件，因为blur事件会先触发并隐藏可点击元素。

以下是一些示例代码： JS：

$('#test').blur(function() {
    $('#dropdown').css("display", "none");
});
$('#test').focus(function() {
    $('#dropdown').css("display", "inline");
});

HTML：

<input id="test" />
<input />
<input />

<ul id="dropdown" style="display: none">
    <li><a onclick="alert('option 1 selected')">option 1</a></li>
    <li><a onclick="alert('option 2 selected')">option 2</a></li>
    <li><a onclick="alert('option 3 selected')">option 3</a></li>
</ul>

我理解这个问题。但是解决这个问题的最佳做法是什么？我可以实现setTimeout函数等待几毫秒，直到我隐藏菜单。但这感觉就像一个黑客，而不是一个干净的解决方案。

Answer 1

试试这个：您可以使用show()或hide()代替更改css值。在li内绑定点击事件以将锚点设置为文本框。绑定文档的单击事件并检查目标是否不是输入框以隐藏选项。

$('#dropdown li a').click(function(e) {
    $('#test').val($(this).text());
    $('#dropdown').hide();
});

$(document).on("focus click keydown blur","*",function(e){
    var keyCode = e.keyCode || e.which; 
    if(keyCode == 9 || e.target.id!='test')
    $('#dropdown').hide();
});

$('#test').on("focus click",function(e) {
    $('#dropdown').show();
});

DEMO with Single Input
的 DEMO with Multiple Input

缺少点击事件，因为模糊事件隐藏了元素

1 个答案: