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

【问题标题】：jquery+CSS search form didn't submit the datajquery+CSS搜索表单没有提交数据
【发布时间】：2014-04-06 00:36:44
【问题描述】：

我在 Google 上找到了以下 搜索表单 的酷代码： 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);
    }
}

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');
}

但问题是，好像按回车键后，我们并没有进入结果页面，为什么？

我尝试将其修复为：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');
}

但是这样就失去了搜索的效果。

有什么帮助吗？

【问题讨论】：

这是你要找的那个吗：jsfiddle.net/vBxqC/310
在阻止了默认的提交动作之后，你期望什么？！预期没有提交表单！
@Unknown 好像然后结果没有提交，虽然效果是对的。

标签： jquery css search

【解决方案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);
        }
});

【讨论】：