4

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

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)
4

2 回答 2

9

使用选择事件。此处 的文档 Enter 键被自动完成捕获以关闭菜单并且故意不传播。回车键和鼠标选择都会触发选择事件。但是，当单击表单时，将在标签有机会更改之前提交，因此必须先设置该值。根据您的数据源，您可能希望使用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();
)
于 2012-08-22T17:06:23.567 回答
1

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

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

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

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

我相当肯定这将为您处理这两种情况。onEnter 和 onClick。

于 2012-08-22T17:08:58.237 回答