Форма поиска: отправить обновление только частично после каждого нажатия - PullRequest
Новая
       11

Форма поиска: отправить обновление только частично после каждого нажатия

0 голосов
/ 12 июня 2018

Я пытаюсь создать форму поиска, которая обновляет частичное после каждого ввода: когда я делаю только: 

$("#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

1 Ответ

0 голосов
/ 12 июня 2018

Попробуйте этот код: 

$("#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 Я написал e.preventDefault () перед сообщением ajax.

После вашего комментария я предлагаю не использовать саму форму.

Я обновил код.

...