jQueryUI的自动完成“，选择”不上点击鼠标工作，但工作在关键事件 [英] jQueryUI autocomplete 'select' does not work on mouse click but works on key events

问题描述

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菜单项和捕获鼠标事件来改变输入文本的价值。


• 我似乎无法点击菜单项，并触发select事件。即当我点击菜单项，永远不会显示控制台消息。


• 这是因为如果点击事件被解雇的菜单和关闭它，而不是真正触发select事件。如何克服这个问题的任何想法？


• 我试过appendTo：$这个，而不是输入的父分区，然后点击鼠标正常工作！ - 选择事件被炒鱿鱼，​​并成功显示控制台消息。但是，这不是我想要的，因为菜单被扭曲了，因为UI他们可能共享相同的z-index父专区内追加。即使我在这种情况下，改变的z-index到higehr数字，它也不太帮助。所以，我正在寻找一个解决方案，我不'有'，如果可以使用appendTo。

我觉得挺在球场的各种其他问题，但没有这些似乎解决我的问题。

I found various other questions quite in the ballpark, but none of these seem to address my question.

<一个href=\"http://stackoverflow.com/questions/7961708/jquery-autocomplete-left-mouse-click-not-firing-select-event\">jQuery自动完成 - 鼠标左键不费一枪选择事件

<一个href=\"http://stackoverflow.com/questions/7315556/jquery-ui-autocomplete-select-event-not-working-with-mouse-click\">jQuery不带鼠标的工作自动完成界面选择事件点击

谢谢！

推荐答案

我正面临着类似的问题。我想提交表单，当用户上的选项点击。但形式得到提交之前也可以设置输入的值。因此，在服务器端控制器有一个空值。

I was facing a similar problem. I wanted to submit the form when the user clicked on an option. But the form got submitted even before the value of the input could be set. Hence on the server side the controller got a null value.

我解决了使用威廉牛的回答修改后的版本上的另一个有关的职位 - <一个href=\"http://stackoverflow.com/questions/7315556/jquery-ui-autocomplete-select-event-not-working-with-mouse-click\">jQuery不带鼠标的工作自动完成界面选择事件点击

I solved it using a modified version of William Niu's answer on another related post - jQuery UI autocomplete select event not working with mouse click

我基本检查事件类型。如果这是一个点击，然后我明确的输入框中的值设置为ui.item.value值。请参见下面的代码片段，

I basically checked for the event type. If it was a click then I explicitly set the input box's value to the value in ui.item.value. See the snippet below,

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的自动完成“，选择”不上点击鼠标工作，但工作在关键事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！