jQuery：在模糊（）事件之前触发单击（）

我有一个输入字段，我尝试在其中提出自动完成建议。代码看起来像

<input type="text" id="myinput">
<div id="myresults"></div>

关于输入的blur()我想隐藏结果的 div 事件：

$("#myinput").live('blur',function(){
     $("#myresults").hide();
});

当我在输入中写入一些内容时，我向服务器发送请求并获取 json 响应，将其解析为 ul->li 结构并将此 ul 放入我的#myresults div.

当我单击此解析的 li 元素时，我想将 li 中的值设置为输入并隐藏#myresults div

$("#myresults ul li").live('click',function(){
     $("#myinput").val($(this).html());
     $("#myresults").hide();
});

一切都很顺利，但是当我点击我的li时blur()事件在之前触发click()并且输入的值无法获取li的html。

我该如何设置click()之前的事件blur()?

解决方案1

听mousedown代替click.

The mousedown and blur当您按下鼠标按钮时，事件会接连发生，但是click仅当您释放它时才会发生。

解决方案2

You can preventDefault() in mousedown阻止下拉菜单窃取焦点。轻微的优点是，释放鼠标按钮时将选择该值，这就是本机选择组件的工作方式。JSFiddle

$('input').on('focus', function() {
    $('ul').show();
}).on('blur', function() {
    $('ul').hide();
});

$('ul').on('mousedown', function(event) {
    event.preventDefault();
}).on('click', 'li', function() {
    $('input').val(this.textContent).blur();
});