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

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

谢谢！

最佳答案

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

我在另一个相关的帖子 – jQuery UI autocomplete select event not working with mouse click上使用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();     
        }
    }
    });

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

猜你在找的jQuery相关文章