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工作正常，我在自动完成菜单中正确获取所有条目。
- 我可以使用键向上/向下箭头来选择菜单项，一旦我点击返回，就会正确触发select事件并显示控制台消息。
- 我可以成功关注ui-menu-items并捕获鼠标在事件上以更改输入文本的值。
- 我似乎无法单击菜单项并触发选择事件。 即，当我单击菜单项时，控制台消息永远不会显示。
- 就好像click事件正在关闭菜单并关闭它而不是实际触发select事件。 有关如何克服这个问题的任何想法？
- 我尝试“appendTo：$ this”而不是输入父div，然后鼠标点击工作正常！ – 选择事件被触发并且控制台消息成功显示。 但这不是我想要的，因为菜单被附加在父div中，这会扭曲UI，因为它们可能共享相同的z-index。 即使我在这种情况下将z-index更改为higehr数字，也没有太大帮助。 所以我正在寻找一个解决方案，如果可能的话我不必使用appendTo。
我在球场上发现了各种其他问题，但这些问题似乎都没有解决我的问题。
jQuery自动完成 – 左键单击未触发选择事件
jQuery UI自动完成选择事件无法单击鼠标
谢谢！
我遇到了类似的问题。 我想在用户点击选项时提交表单。 但是，即使在输入值可以设置之前，表单也已提交。 因此，在服务器端，控制器获得空值。
我使用William Niu的另一个相关post的修改版本解决了它 – jQuery UI自动完成选择事件无法点击鼠标
我基本上检查了事件类型。 如果是点击，那么我明确地将输入框的值设置为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(); } } });
我有同样的问题，但在我的情况下，它更奇怪。 每隔一次（当使用鼠标时）触发select事件。 对我来说，如果我使用键盘，选择事件也会被解雇。
不幸的是我无法通过jsfiddle重现这个问题。 但我仍然想提供我的jsfiddle，也许这是进一步分析的良好起点。 这是我的jsFiddle代码： http ： //jsfiddle.net/knzNg/
唯一的区别是我使用本地数组作为自动完成数据的数据源。 我想最好更改代码以使用远程数据源。
我在IE的所有版本（包括9）中测试了它，并且在我使用鼠标选择项目后总是以空输入控件结束。 这引起了一些头痛。 我甚至去了jQuery UI的源代码，看看那里发生了什么，但也没有找到任何提示。 我们可以通过设置超时来实现这一点，该超时在IE的javascript引擎内部对事件进行排队。 因为它是有保证的，所以这个超时事件将在焦点事件之后排队（这已经被IE本身触发了）
select: function (event, ui) { var label = ui.item.label; var value = ui.item.value; $this = $(this); setTimeout(function () { $('#txtBoxRole').val(value); }, 1); },
我认为combobox代码中可能存在一个错误，因为我无法使其工作。 尝试将’select：’更改为’selected：’。
或者您可以尝试更改实际JQuery UI代码中的代码，我相信下面是罪魁祸首，因此对“select”的更改可能会起作用。 我说可能因为我没有尝试过，我只是按照上面的说法去了。
select: function( event ) { this._trigger("selected", event, { item: this.active }); }
将jqueryvalidation插件版本更改为1.9适用于我
我今天遇到了这个问题，发现应该有自动完成的字段有一个焦点事件，它使用了document.getElementById（’id’）。value = ID错误，从而停止了脚本。
@ atsurti的评论意图很好，但还有更好的方法。
只需使用超时，允许jQuery设置表单的时间。 更少的代码=更好的代码，是吗？ 🙂
jQuery( "#autoDropDown" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ], minLength: 0, delay:0, select: function( event, ui ) { window.setTimeout(function(){ document.getElementById('myForm').submit(); }, 1); } });
我有同样的问题，经过大量的谷歌搜索，似乎其他一些jquery插件与UI Core冲突。 结果是我的jquery validation plugin version 1.6导致了错误。 我已将jquery validation to 1.9更改jquery validation to 1.9 ，现在可以使用鼠标选择autocomplete 。
如果有其他人在经过两年半的时间后面对这个:-)
OP问题的解决方案是在select回调中调用event.stopPropagation() 。 例：
$input.autocomplete( { // ... options select: function( event, ui ) { // ... handlers e.stopPropagation(); } } );
只是从回调中返回false不起作用