Question

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

我在球场上发现了各种其他问题，但这些问题似乎都没有解决我的问题。

jQuery Autocomplete - Left Mouse Click not firing Select event

jQuery UI autocomplete select event not working with mouse click

谢谢！

Answer 1

我遇到了类似的问题。我想在用户点击选项时提交表单。但是，即使在输入值可以设置之前，表单也已提交。因此，在服务器端，控制器获得空值。

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

我基本上检查了事件类型。如果是点击，那么我明确地将输入框的值设置为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();     
        }

    }
    });

Answer 2

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

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

Answer 3

我有同样的问题，但就我而言，更奇怪。每隔一次（使用鼠标时）触发select事件。对我来说，如果我使用键盘，选择事件也会被解雇。

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

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

Answer 4

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

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

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

Answer 5

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

Answer 6

将jquery验证插件版本更改为1.9适用于我

Answer 7

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

Answer 8

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

Answer 9

如果有其他人在两年半之后面对这个:-) ..

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

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

从回调中返回false无法正常工作

Answer 10

这对我有用：

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


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

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


});

jQueryUI自动完成'select'在鼠标单击时不起作用，但适用于关键事件

10 个答案: