javascript搜索功能不工作

-1

我有一個搜索表單，它接受一個輸入並將數據傳遞給一個django視圖。
javascript搜索功能不工作

形式具有上點擊打開一個輸入框狀示於以下圖片搜索按鈕：

現在，當我輸入內容的輸入，然後按回車，它只是摺疊輸入框並且不發生任何操作。它每次都發生。我希望它調用與窗體關聯的函數。
我想出問題出在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}

來源

2015-11-20 Manish Gupta

它，因爲你沒有提交表單嘗試使用此方法提交表單..

沒有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... 
       } 
    }); 
});

希望這有助於..

來源

2015-11-20 06:47:04

你能告訴我如何從我的代碼中調用提交按鈕？我沒有實施實時搜索。我只需在表單中調用該操作，並在我的django視圖中捕獲輸入值。。 –

使用 $（ '輸入 '）按鍵（功能（E）{ 如果（e.which == 13）{ $（' ＃形式yourFormId'）提交（）; 將返回false;} }）; 用於在按鍵時提交表單。，你會得到數據到行動中給出的頁面。 –

讓你知道一步一步的過程。

在搜索輸入上設置一個.keyup事件。 $("[name='search_box']").keyup(function(e){ .... });
檢查如果按下的鍵的鍵碼等於13（回車鍵）if(e.keyCode==13){ ... }
如果是13，然後調用與表單關聯的功能。

來源

2015-11-20 06:47:53 void

我不太瞭解JavaScript。你能告訴我如何做到這一點？ –

javascript搜索功能不工作

回答

相關問題