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 工作正常，我在自动完成菜单中正确获取了所有条目。
• 我可以使用向上/向下键来选择菜单项，一旦按下回车键，就会正确触发选择事件并显示控制台消息。
• 我可以成功地关注 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

谢谢!

Answer 1

我也遇到过类似的问题。我想在用户单击某个选项时提交表单。但表单甚至在设置输入值之前就已提交。因此在服务器端 Controller 得到一个空值。

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

    }
    });