javascript搜索功能不起作用

Question

我有一个搜索表单，它接受输入并将数据传递给 Django View 。

表单有一个搜索按钮，点击它会打开一个输入框，如下图所示:

现在，当我在输入框中输入内容并按下回车键时，它只会折叠输入框，不会发生任何操作。它每次都会发生。我希望它调用与表单关联的函数。
我发现问题出在 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...
                 }
    });
});

希望这有帮助..