jQueryUI自动完成'；选择'；不适用于鼠标单击，但适用于按键事件

JS/JQuery:

$this.find('input').autocomplete({
    source: "/autocomplete_tc_testcasename", 
    minLength: 2,
    focus: function(e,ui){
        $(this).val(ui.item.label);
        return false;
    },   
    select: function(e, ui) {
        console.log("Selected: "+ui.item.value);
    }    
}); 

        .ui-autocomplete {
            max-height: 200px;
            overflow-y: auto;
            padding: 5px;
        }   
        .ui-menu {
            list-style: none;
            background-color: #FFFFEE;
            width: 50%;
            padding: 0px;
            border-bottom: 1px solid #DDDDDD;
            border-radius: 6px;
            -webkit-box-shadow: 0 8px 6px -6px black;
            -moz-box-shadow: 0 0px 0px -0px black;
            box-shadow: 0px 2px 2px 0px #999999;
        }   
        .ui-menu .ui-menu {
        }
        .ui-menu .ui-menu-item {
            color: #990000;
            font-family:"Verdana";
            font-size: 12px;
            border-top: 3px solid #DDDDDD;
            background-color: #FFFFFF;
            padding: 10px;
        }

CSS:

$this.find('input').autocomplete({
    source: "/autocomplete_tc_testcasename", 
    minLength: 2,
    focus: function(e,ui){
        $(this).val(ui.item.label);
        return false;
    },   
    select: function(e, ui) {
        console.log("Selected: "+ui.item.value);
    }    
}); 

        .ui-autocomplete {
            max-height: 200px;
            overflow-y: auto;
            padding: 5px;
        }   
        .ui-menu {
            list-style: none;
            background-color: #FFFFEE;
            width: 50%;
            padding: 0px;
            border-bottom: 1px solid #DDDDDD;
            border-radius: 6px;
            -webkit-box-shadow: 0 8px 6px -6px black;
            -moz-box-shadow: 0 0px 0px -0px black;
            box-shadow: 0px 2px 2px 0px #999999;
        }   
        .ui-menu .ui-menu {
        }
        .ui-menu .ui-menu-item {
            color: #990000;
            font-family:"Verdana";
            font-size: 12px;
            border-top: 3px solid #DDDDDD;
            background-color: #FFFFFF;
            padding: 10px;
        }

问题摘要：

$this.find('input').autocomplete({
    source: "/autocomplete_tc_testcasename", 
    minLength: 2,
    focus: function(e,ui){
        $(this).val(ui.item.label);
        return false;
    },   
    select: function(e, ui) {
        console.log("Selected: "+ui.item.value);
    }    
}); 

        .ui-autocomplete {
            max-height: 200px;
            overflow-y: auto;
            padding: 5px;
        }   
        .ui-menu {
            list-style: none;
            background-color: #FFFFEE;
            width: 50%;
            padding: 0px;
            border-bottom: 1px solid #DDDDDD;
            border-radius: 6px;
            -webkit-box-shadow: 0 8px 6px -6px black;
            -moz-box-shadow: 0 0px 0px -0px black;
            box-shadow: 0px 2px 2px 0px #999999;
        }   
        .ui-menu .ui-menu {
        }
        .ui-menu .ui-menu-item {
            color: #990000;
            font-family:"Verdana";
            font-size: 12px;
            border-top: 3px solid #DDDDDD;
            background-color: #FFFFFF;
            padding: 10px;
        }

• AJAX工作正常，我在自动完成菜单中正确地获得了所有条目
• 我能够使用键向上/向下箭头选择菜单项，一旦我点击回车键，选择事件将正确触发并显示控制台消息
• 我可以成功地关注ui菜单项，并捕获鼠标悬停事件以更改输入文本的值
• 我似乎无法单击菜单项并触发选择事件。i、 e当我单击菜单项时，控制台消息永远不会显示
• 这就好像click事件正在关闭菜单，而不是实际触发select事件。你知道如何克服这个问题吗
• 我尝试将“appendTo:$this”改为输入的父div，然后单击鼠标就可以了select事件被触发并成功显示控制台消息。但这不是我想要的，因为菜单附加在父div中，这会扭曲UI，因为它们可能共享相同的z索引。在这种情况下，即使我将z-index改为一个更高的数值，也没什么帮助。因此，我正在寻找一种解决方案，如果可能的话，我不必使用appendTo

我还发现了很多其他的问题，但似乎都不能回答我的问题

---

谢谢

我也有同样的问题，但对我来说更奇怪。 select事件每秒触发一次（使用鼠标时）。 对我来说，如果我使用键盘，select事件也可以正常启动

不幸的是，我无法通过JSFIDLE重现这个问题。但我仍然想提供我的JSFIDLE，也许这是进一步分析的一个很好的起点。 以下是我的JSFIDLE代码：

唯一的区别是我使用一个本地数组作为自动完成数据的数据源。

---

我想最好将代码更改为使用远程数据源。

我认为组合框代码中可能存在错误，因为我也无法使其正常工作。尝试将“选择：”更改为“选定：”

或者您可以尝试在实际的jQueryUI代码中更改代码，我相信下面是罪魁祸首，所以对“select”的更改可能会起作用。我说也许我没有试过，我只是简单地用上面的方法

select: function( event ) {
    this._trigger("selected", event, { item: this.active });
}

---

我在所有版本的IE（包括9）中测试了它，在我用鼠标选择了一个项目后，总是得到一个空的输入控件。这引起了一些头痛。我甚至查看了jQueryUI的源代码，看看那里发生了什么，但也没有找到任何提示。我们可以通过设置一个超时来实现这一点，该超时在IE的javascript引擎中对事件进行内部排队。因为可以保证，该超时事件将在焦点事件之后排队（这之前已经由IE本身触发）

---

我也有同样的问题，在谷歌搜索了很多次之后，似乎其他一些jquery插件与

UICore

冲突。因此，结果是我的

jquery验证插件版本1.6

导致了错误。我已经将jquery验证更改为1.9，现在可以使用鼠标选择自动完成。

将jquery验证插件版本更改为1.9对我有效。

我今天遇到了这个问题，发现应该自动完成的字段有一个焦点事件，该事件使用了document.getElementById（'id'）。value=具有错误的id，从而停止脚本

我也面临着类似的问题。我想在用户单击某个选项时提交表单。但是表单在输入值可以设置之前就已经提交了。因此，在服务器端，控制器得到一个空值

我在另一篇相关文章中使用了威廉·牛（William Niu）答案的修改版本来解决这个问题：

我基本上检查了事件类型。如果是单击，那么我显式地将输入框的值设置为ui.item.value中的值。请参见下面的片段

jQuery( "#autoDropDown" ).autocomplete({
    source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ], minLength: 0, delay:0,
    select: function( event, ui ) {
        var origEvent = event;
        while (origEvent.originalEvent !== undefined){
            origEvent = origEvent.originalEvent;
        }
        //console.info('Event type = ' + origEvent.type);
        //console.info('ui.item.value = ' + ui.item.value);
        if (origEvent.type == 'click'){
            document.getElementById('autoDropDown').value = ui.item.value;
            document.getElementById('myForm').submit();
        } else {
            document.getElementById('myForm').submit();     
        }

    }
    });

---

@阿特苏蒂的评论是出于好意，但还有更好的办法

只需使用超时，允许jQuery设置表单的时间。代码越少=代码越好，是吗？：）

---

如果还有其他人面临这个问题：-）大约两年半后

OP问题的解决方案是在

选择
回调中调用
event.stopPropagation（）
。
例如：

$input.autocomplete( {
    // ... options
    select: function( event, ui ) {
        // ... handlers
        e.stopPropagation();
    }
} );

仅从回调返回false不起作用
这对我来说很有效：

$this.find('input').autocomplete({
    source: "/autocomplete_tc_testcasename", 
    minLength: 2,
    },   


    focus: function(event, ui) { 
        $('#input').val(ui.item.value); 
    },

    select: function () {
        $("#button").click();
    }


}); 

除非你能在一个外部网站上创建一个你的问题的例子或者发布一个链接到一个外部网站，否则这将很难重新创建和解决…谢谢你的提示。在firebug解决该问题的过程中，我发现在自动完成菜单上单击鼠标选择之前调用了“模糊”事件。一旦我更改了围绕此事件的逻辑以按特定顺序处理这两个事件，请通过鼠标单击“选择现在起作用”。@txciggy:您能准确描述一下如何“更改围绕此事件的逻辑以按特定顺序处理这两个事件”吗？我遇到了这个问题，我对JS中事件处理的知识还不足以让我自己解决这个问题。thanks@LukeGriffiths：我添加了一个标志“autocomplete=false”全局模糊和自动完成。当我输入我的自动完成输入字段的模糊处理函数时，我有一个if（！autocomplete）{//do blur stuff here}。在autocomplete‘focus’中，我设置autocomplete=true；在autocomplete“close”中，我设置了autocomplete=false，并在我的autocomplete字段上显式调用blur（）。我试图使用fiddler:，使用伪造的远程数据源重现此问题，不幸的是，我无法重现此问题：-（您是否有其他鼠标事件处理程序，如blur、hover、dblclick、mouseover、mouseout等？在我的例子中，我有一个模糊处理程序，可以覆盖菜单上的click事件。一旦我更改了它周围的逻辑，一切都会按预期工作。@txciggy我解决了我的问题。问题确实是这样的