搜索表单:每次按键后仅提交部分刷新

Question

我正在尝试做一个搜索表单，在每次输入后刷新部分:当我这样做的时候：

$("#search-field-id").on('input', function() {
    console.log("keypressed");
    $("#search-form").submit();
 });

它会刷新所有页面，所以我试图更改提交默认功能，但它不起作用：

$("#search-field-id").on('input', function() {
    console.log("keypressed");
    $("#search-form").submit(function(e){
      console.log("submitting");
      $.ajax({
        type:"GET",
        url: "#{translations_path}",
        data:$(this).serialize(),
        success:function(data){
          $.get({
            url: "#{translations_path}",
            dataType: "html",
            data: {
              partial: 'translation_key_list'
            },
            success: function(data){
              $("#translations-list").html(data)
            }
          });
        }
      });
      e.preventDefault();
    });
  });

我做错了什么？

视图：

.search-form
  = form_tag(translations_path, method: :get, id:"search-form", remote:true) do
    .ui.icon.input
      = text_field_tag :key_we_looking_for, params[:key_we_looking_for], id:"search-field-id"
      = submit_tag 'Search', name:nil

Answer 1

尝试以下代码：

$("#search-field-id").on('input', function() {
    console.log("keypressed");
     performGet();
  });




 function performGet(){
    console.log("submitting");
              $.ajax({
                type:"GET",
                url: "#{translations_path}",
                data:$("#search-form").serialize(),
                success:function(data){
                  $.get({
                    url: "#{translations_path}",
                    dataType: "html",
                    data: {
                      partial: 'translation_key_list'
                    },
                    success: function(data){
                      $("#translations-list").html(data)
                    }
                  });
                }
              });

}

请让我们知道这是否有效。

PS我在ajax帖子之前写过e.preventDefault()。

在您的评论之后，我建议不要使用表单提交本身。

我已经更新了代码。