javascript - 搜索表单 : submit refresh only partial after every keypressed

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();
    });
  });

我做错了什么？

View :

.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()。

关注您的评论我建议不要使用表单提交本身。

我已经更新了代码。