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（）。

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

我已经更新了代码。

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

1 个答案: