javascript搜索功能不起作用

Question

I have a search form which which takes an input and pass the data to a django view.

the form has a search button which on click opens a input box like shown in images given below:

Now when i enter something into the input and press enter, it just collapses the input box and no action occurs. It happens every time. I want it to call the function associated with form.
I figured out that the problem is in the javascript but don't know how to fix it.

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

its because you didn't submit form Try this to submit form..

Without AJAX

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

with performing 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...
                 }
    });
});

Hope this helps..

Answer 2

Letting you know the step by step procedure.

1. Set a .keyup event on the search input. $("[name='search_box']").keyup(function(e){ .... });
2. Check if the keycode of the pressed key is equal to 13 (enter key) if(e.keyCode==13){ ... }
3. If it is 13 then call the function associated with the form.