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