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); } });@H_502_8@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; }@H_502_8@问题摘要：
> 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();
}
}
});
@H_502_8@
