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

让您知道一步一步的程序。

在搜索输入上设置.keyup事件。 $("[name='search_box']").keyup(function(e){ .... });
检查按下的键的键码是否等于13（输入键）if(e.keyCode==13){ ... }
如果是13，则调用与表单关联的函数。

javascript搜索功能不起作用

2 个答案: