jQueryUI 自动完成“选择”不适用于鼠标单击，但适用于关键事件答案

【问题标题】：jQueryUI autocomplete 'select' does not work on mouse click but works on key eventsjQueryUI 自动完成“选择”不适用于鼠标单击，但适用于关键事件
【发布时间】：2012-04-06 05:32:54
【问题描述】：

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);
    }    
});

CSS：

        .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-menu-items 并捕获鼠标悬停事件以更改输入文本的值。
我似乎无法单击菜单项并触发选择事件。即，当我单击菜单项时，永远不会显示控制台消息。
就好像单击事件正在解除菜单并关闭它，而不是实际触发选择事件。关于如何解决这个问题的任何想法？
我尝试使用“appendTo : $this”代替输入的父 div，然后鼠标单击就可以正常工作了！ - 选择事件被触发并成功显示控制台消息。但这不是我想要的，因为菜单附加在父 div 中，这会扭曲 UI，因为它们可能共享相同的 z-index。即使在这种情况下我将 z-index 更改为一个高数，它也没有多大帮助。因此，我正在寻找一种解决方案，如果可能的话，我不必“必须”使用 appendTo。

我发现了很多其他问题，但似乎没有一个能解决我的问题。

jQuery Autocomplete - Left Mouse Click not firing Select event

jQuery UI autocomplete select event not working with mouse click

谢谢！

【问题讨论】：

这将很难重新创建和解决，除非您可以在jsfiddle.net 上创建问题示例或发布指向外部站点的链接....
感谢您的提示。在解决问题的过程中，我发现在自动完成菜单上单击鼠标选择之前调用了“模糊”事件。一旦我更改了围绕此的逻辑以按特定顺序处理这两个事件，现在可以通过鼠标单击进行选择。
@txciggy：你能准确描述一下你是如何“改变逻辑以按特定顺序处理这两个事件”的吗？我遇到了这个问题，我对 JS 事件处理的了解还不足以让我自己解决这个问题。谢谢
@LukeGriffiths：我添加了一个全局标志 'autocomplete=false' 来模糊和自动完成。当我输入我的自动完成输入字段的模糊处理功能时，我有一个 if(!autocomplete) {//do blur stuff here}。在自动完成“焦点”中，我设置了 autocomplete=true;在自动完成“关闭”中，我设置 autocomplete=false 并在我的自动完成字段上显式调用 blur()。

标签： jquery select autocomplete click mouse

【解决方案1】：

这对我有用：

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


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

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


});

【讨论】：

【解决方案2】：

如果其他人在大约 2 年半之后面临这个问题 :-) ..

解决 OP 问题的方法是在 select 回调中调用 event.stopPropagation()。示例：

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

只是从回调中返回 false 不起作用

【讨论】：

【解决方案3】：

我有同样的问题，经过大量谷歌搜索后，似乎其他一些 jquery 插件与UI Core 冲突。所以结果是我的jquery validation plugin version 1.6 导致了错误。我已经更改了jquery validation to 1.9，现在autocomplete 可以使用鼠标进行选择。

【讨论】：

【解决方案4】：

@atsurti 的评论是出于好意，但有更好的方法。

只需使用超时来代替，让 jQuery 有时间设置表单。更少的代码 = 更好的代码，是吗？ :)

jQuery( "#autoDropDown" ).autocomplete({
  source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ], minLength: 0, delay:0,
  select: function( event, ui ) {
    window.setTimeout(function(){
      document.getElementById('myForm').submit();  
    }, 1);
  }
});

【讨论】：

【解决方案5】：

我遇到了类似的问题。当用户单击一个选项时，我想提交表单。但是表单甚至在输入的值可以设置之前就被提交了。因此，在服务器端，控制器得到了一个空值。

我在另一篇相关帖子 - jQuery UI autocomplete select event not working with mouse click 上使用 William Niu 答案的修改版本解决了这个问题

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

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();     
        }

    }
    });

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

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

【讨论】：

这也是我的问题。旧版本之间似乎存在一些冲突。

【解决方案8】：

我在所有版本的 IE（包括 9）中对其进行了测试，并且在我使用鼠标选择了一个项目后，总是以一个空的输入控件结束。这引起了一些头痛。我什至去查看 jQuery UI 的源代码，看看那里发生了什么，但也没有找到任何提示。我们可以通过设置一个超时来做到这一点，它在 IE 的 javascript 引擎中内部排队一个事件。因为有保证，这个 timeout-event 会在 focus 事件之后排队（之前已经被 IE 自己触发过）

select: function (event, ui) {
    var label = ui.item.label;
    var value = ui.item.value;
    $this = $(this);
    setTimeout(function () {
        $('#txtBoxRole').val(value);
    }, 1);
},

【讨论】：

【解决方案9】：

我认为组合框代码中可能存在错误，因为我也无法使其正常工作。尝试将 'select:' 更改为 'selected:'。

或者您可以尝试更改实际 JQuery UI 代码中的代码，我相信下面是罪魁祸首，因此更改“选择”可能会起作用。我说可能因为我没有尝试过，我只是按照上面的。

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

【讨论】：

错误Uncaught TypeError: this._trigger is not a function，是什么版本？

【解决方案10】：

我有同样的问题，但在我的情况下更奇怪。每秒触发一次 select 事件（使用鼠标时）。对我来说，如果我使用键盘，select 事件也会被触发。

不幸的是，我无法通过 jsfiddle 重现此问题。但我仍然想提供我的 jsfiddle，也许这是进一步分析的一个很好的起点。这是我的 jsFiddle 代码：http://jsfiddle.net/knzNg/

唯一的区别是我使用本地数组作为自动完成数据的数据源。我想最好将代码更改为使用远程数据源。

【讨论】：

我尝试使用 fiddler 使用伪造的远程数据源重现此问题：jsfiddle.net/knzNg/2，不幸的是我无法重现此问题 :-(
您是否有其他鼠标事件处理程序，例如 blur、hover、dblclick、mouseover、mouseout 等？就我而言，我有一个模糊处理程序，它将覆盖菜单上的点击事件。一旦我改变了它的逻辑，一切都会按预期进行。
@txciggy 我解决了我的问题。问题确实是一些我不知道的 javascript 代码做了一些 dom 操作，导致 jq ui 小部件调用自动完成的破坏函数并重新创建它。所以在我的情况下，问题肯定似乎是其他 js 代码......所以将来我会更加意识到这一点。非常感谢！