Функция поиска javascript не работает

Question

У меня есть форма поиска, которая принимает входные данные и передает данные в представление django.

форма имеет кнопку поиска, которая по нажатию открывает окно ввода, как показано на изображениях, приведенных ниже:

Теперь, когда я вхожу что-то на вход и нажмите клавишу ввода, это просто сбрасывает поле ввода и никаких действий не происходит. Это происходит каждый раз. Я хочу, чтобы он вызывал функцию, связанную с формой.
Я понял, что проблема в javascript, но не знаю, как это исправить.

HTML:

<form class="navbar-form" role="search" method="POST" action="{% url 'search' %}"> 
{% csrf_token %} 
    <div class="input-group"> 
     <input type="text" class="form-control" placeholder="Search" name="search_box"> 
     <span class="input-group-btn"> 
      <button name="search" type="submit" class="search-btn"> <span class="glyphicon glyphicon-search"> <span class="sr-only">Search</span> </span> </button> 
     </span> 
    </div> 
</form> 

JavaScript:

e(function() { 
      function t() { 
       var t = e('.navbar-collapse form[role="search"].active'); 
       t.find("input").val(""), t.removeClass("active") 
      } 
      e('header, .navbar-collapse form[role="search"] button[type="reset"]').on("click keyup", function(n) { 
       console.log(n.currentTarget), (27 == n.which && e('.navbar-collapse form[role="search"]').hasClass("active") || "reset" == e(n.currentTarget).attr("type")) && t() 
      }), e(document).on("click", '.navbar-collapse form[role="search"]:not(.active) button[type="submit"]', function(t) { 
       t.preventDefault(); 
       var n = e(this).closest("form"), 
        i = n.find("input"); 
       n.addClass("active"), i.focus() 
      }), e(document).on("click", '.navbar-collapse form[role="search"].active button[type="submit"]', function(n) { 
       n.preventDefault(); 
       var i = e(this).closest("form"), 
        s = i.find("input"); 
       e("#showSearchTerm").text(s.val()), t() 
      }) 
     } 

CSS:

.navbar-collapse form[role="search"] input { 
    font-size: 18pt; 
    opacity: 0; 
    display: none; 
    height: 48px; 
    position: relative; 
    z-index: 2; 
    float: left; 
} 

.navbar-collapse form[role="search"].active input { 
    display: table-cell; 
    opacity: 1; 
    z-index: 100; 
    border-radius: 0; 
    border: none; 
    line-height: 45px; 
    height: 75px; 
    font-size: 14px; 
    padding: 0px 25px; 
    width: 315px; 
} 

.navbar-collapse {float:right; padding:0px} 

Answer 1

его, потому что вы не представили форму Попробуйте представить форму ..

Без AJAX

$('form#myForm').submit(); 

с выполнением AJAX

$('input#submitButton').click(function() { 
    $.post('some-url', $('form#myForm').serialize(), function(data) { 
     ... do something with response from server 
     }, 
     'json' // I expect a JSON response 
    ); 
}); 

$('input#submitButton').click(function() { 
    $.ajax({ 
     url: 'some-url', 
     type: 'post', 
     dataType: 'json', 
     data: $('form#myForm').serialize(), 
     success: function(data) { 
        ... do something with the data... 
       } 
    }); 
}); 

Надеется, что это помогает ..

Answer 2

Позволяя вы знаете, шаг за шагом процедурами.

1. Задайте вопрос .keyup на вход для поиска. $("[name='search_box']").keyup(function(e){ .... });
2. Проверьте, если скан нажатой клавиши равен 13 (ввести ключ) if(e.keyCode==13){ ... }
3. Если 13, то вызовите функцию, связанную с формой.