按下回车键时jQuery UI自动完成字段未提交答案

【问题标题】：jQuery UI autocomplete field not submitting when pressing enter按下回车键时jQuery UI自动完成字段未提交
【发布时间】：2012-08-18 03:23:08
【问题描述】：

我正在关注有关此主题的 Railscast，虽然自动完成功能有效，但当用户选择一个项目并按 Enter 键时，我无法让它提交表单。我有这个 (coffeescript) 代码，但它似乎不起作用......谁能看看我哪里出错了？

jQuery ->
  $('#search_bar').autocomplete( 
    source: $('#search_bar').data('autocomplete-source')
  ).keydown (e) ->
    $('#search_button').trigger "submit" if e.keyCode is 13

理想情况下，我也希望它通过鼠标单击来提交选择项目 - 但不确定这是否可能？

更新：我试过这个...

jQuery ->
  $('#search_bar').autocomplete
    source: $('#search_bar').data('autocomplete-source'),
    select: (event, ui) ->
      $(this).parents("form").submit()

...虽然它现在可以在您使用键盘选择一个项目（并按 Enter）时工作，但如果您通过鼠标单击选择一个项目，它只会发送您输入的字符串，而不是完整的单词自动完成下拉菜单。（我想我需要的是在鼠标悬停时使用文本内容更新搜索字段？）

更新 2：排序！把这个加到最后

focus: (event, ui) ->
   $('#search_bar').val(ui.item.value)

【问题讨论】：

标签： javascript ruby-on-rails jquery-ui autocomplete coffeescript

【解决方案1】：

使用选择事件。 documentation here 回车键被自动完成捕获以关闭菜单并且故意不传播。回车键和鼠标选择都会触发选择事件。但是，当单击表单时，将在标签有机会更改之前提交，因此必须先设置该值。根据您的数据源，您可能希望使用item.label 而不是item.value。

$('#search_bar').autocomplete({
   source: $('#search_bar').data('autocomplete-source'),
   select: function(event, ui) {
         $(this).val(ui.item.value);
         $(this).parents("form").submit();  // this will submit the form.
   }
})

我相信咖啡脚本会是这样的

$('#search_bar').autocomplete(
   source: $('#search_bar').data('autocomplete-source'),
   select: (event, ui) ->
         $(this).val(ui.item.value).parents("form").submit();
)

【讨论】：

谢谢两位！你知道咖啡脚本中的代码应该是什么吗？我似乎无法让它工作：/
我添加了一个coffeescript版本，它也应该是parents()而不是parent()。尽管您可以使用所需的任何选择器找到表单...@jForrest，是的，我们都有正确的想法:)
再次感谢两位 - 我已将代码添加到问题中。虽然当你按下回车键时它可以工作，但当你输入几个字符并用鼠标单击一个单词时它就不行了......关于如何解决这个问题的任何想法？
看起来 select 事件在表单元素更改之前触发，因此可以取消它。必须手动设置点击事件的值。
coffeescript中没有'this'这样的关键字。而是使用'@'。 $(@).val(ui.item.value).parents("form").submit()

【解决方案2】：

对咖啡脚本不太了解，但这就是我在 javascript 中的做法

http://jqueryui.com/demos/autocomplete/

您可以使用“选择”事件。当用户选择某些东西时，请提交：

$( ".selector" ).autocomplete({
    select: function(event, ui) {
        $('#theForm').submit();
    }
});

我相当肯定这会为您解决这两种情况。 onEnter 和 onClick。

【讨论】：