jquery + CSS搜索表单没有提交数据

Question

1. 我在谷歌上找到以下搜索表单的酷代码： Fiddle

HTML：

<form action='admin/search.php'>
    <input id="search" type="search" name="search" />
    <p></p>
</form>

CSS

form {
    display: inline-block;
    margin: 0 100px;
    position: relative;
}
#search {
    border: 4px solid #999;
    cursor: pointer;
    height: 10px;
    padding: 8px;
    position: relative;
    width: 10px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    -moz-appearance: none;
    -webkit-appearance: none;
}
#search:hover {
    border-color: #199ed9;
}
#search:focus {
    border-color: #199ed9;
    outline: none;
    width: 180px;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
}
#search.searching {
    margin-left: 80px;
    width: 10px;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
}
#search + p {
    background: #999;
    content:'';
    cursor: pointer;
    display: block;
    height: 10px;
    position: absolute;
    right: 10px;
    top: -8px;
    width: 4px;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    -moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -moz-transform-origin: center 20px;
    -webkit-transform-origin: center 20px;
}
#search + p:hover, #search:hover + p, #search:focus + p {
    background: #199ed9;
}
#search.searching + p {
    -moz-animation: rotateHandle .6s linear 6;
    -webkit-animation: rotateHandle .6s linear 6;
}
@-webkit-keyframes rotateHandle {
    from {
        -webkit-transform: rotate(135deg);
    }
    to {
        -webkit-transform: rotate(-225deg);
    }
}
@-moz-keyframes rotateHandle {
    from {
        -moz-transform: rotate(135deg);
    }
    to {
        -moz-transform: rotate(-225deg);
    }
}

JS

var form = $('form'),
    search = $('#search');

form.submit(function(e) {
    e.preventDefault();

    search.addClass('searching').val('');

    setTimeout(function() {
        search.removeClass('searching');
    }, 3600);
});

/* what's with input padding? :/ */
if ($.browser.mozilla) {
    search.css('padding', '3px');
}

但问题是，似乎在按Enter键之后，我们没有进入结果页面，为什么？

1. 我尝试将其修改为：Fiddle fix

   var form = $('form'),
   search = $('#search');
   
   search.submit(function (e) {
   e.preventDefault();
   
   search.addClass('searching').val('');
   
   setTimeout(function () {
       search.removeClass('searching');
       var str = $('#search').val();
       var domain = "://";
       var url = domain + "admin/search.php?search=" + str;
       if (e.keyCode == 13) {
           location.href = url;
       }
   }, 10000);
   });
   
   /* what's with input padding? :/ */
   if ($.browser.mozilla) {
        search.css('padding', '3px');
   }
   

   然后搜索的效果就丢失了。

任何帮助？

Answer 1

这似乎是可行的答案： 的 JS

//expand search bar
var okToSubmit = false;
$("#sform").submit(function(e) {
        if (!okToSubmit){
                e.preventDefault();
                $("#search").addClass('searching').val('');
                var url=$(this).attr('action');

                setTimeout(function (){
                        $.ajax({
                                type: 'POST',
                                url: url,
                                data: $(this).serialize(),
                                timeout: 8000,
                                success: function(r){
                                        $("#search").removeClass('searching');
                                }
                        });
                        okToSubmit = true;
                }, 8000);
        }
});