jQuery UI 自动完成字段在按下回车键时无法提交

Question

jQuery UI 自动完成字段在按下回车键时无法提交

javascriptruby-on-railsjquery-uiautocompletecoffeescript

4

我正在跟随这个主题的Railscast，并且虽然自动完成功能可以正常工作，但当用户选择一个项目并按下回车键时，我无法让它提交表单。我有这段（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)

- A4J

2个回答

1

虽然我不太了解CoffeeScript，但这是我在JavaScript中的做法

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

您可以使用“选择”事件。当用户选择某些内容时，执行提交操作：

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

我相当确定这将为您处理两种情况。无论是 onEnter 还是 onClick。

- jForrest

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nal · Accepted Answer

使用选择事件，文档在这里。输入框中按下回车键会被自动完成插件捕获，以关闭下拉菜单并且不会再向上传递。选择事件将在使用鼠标或者按下回车键时触发。然而，在鼠标选择之前，表格将被提交，此时标签还没有机会改变值，所以必须先设置该值。根据你的数据源，你可能想要使用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.
   }
})

我相信CoffeeScript应该是这样的：

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