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

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

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

jQuery自动完成 - 左键单击未触发选择事件

jQuery UI自动完成选择事件无法使用鼠标单击

谢谢!

Answer 1

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

我使用修改版的William Niu的答案在另一个相关的帖子上解决了它 - jQuery UI自动完成选择事件无法点击鼠标

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

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

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

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