Question

到目前为止这是我的代码..

<script>
var $j = jQuery.noConflict();
var searchBarOpen = false;

function closeSearch() {
    if(searchBarOpen) {
        $j('#navbar-typeahead').hide();
        $j('#navbar-removelabel').hide();
        $j('.navbar-nav').show();
        searchBarOpen = false;
    }
}

function openSearch() {
    if(!searchBarOpen) {
        $j('.navbar-nav').hide();
        $j('#navbar-typeahead').show();
        $j('#navbar-removelabel').show();
        searchBarOpen = true;
    }
}

$j('#navbar-removelabel').click(function(e) {
    e.preventDefault();
    if(searchBarOpen) {
        $j('#navbar-typeahead').val('');
        closeSearch();
    }
});

$j('#navbar-searchlabel').click(function(e) {
    if(!searchBarOpen) {
        e.preventDefault(); 
        openSearch();
    } else {

        if($j('#navbar-typeahead').val() != "") {
            // Getting search results
        } else {
            e.preventDefault(); 
            closeSearch();
        }
    }
});
</script>

现在，当我按下输入时，我无法获取此表单进行搜索.. 我试图使用：

<script>    
function enter () {
    document.onkeypress = function (enter) {
    if (enter.keyCode == 13) {
        $('.enter').submit();
         }
    };
};
</script>

这是我的HTML，

<form role="search" class="navbar-searchform navbar-right" method="get" action="/">
    <div class="form-group">
        <input type="text" name="s" placeholder="Uw zoektermen..." id="navbar-typeahead" class="form-control enter" data-provide="typeahead"></input>
    </div>
    <button id="navbar-removelabel" class="btn bnt-default">
        <span class="glyphicon glyphicon-remove">
        </span>
    </button>
    <button id="navbar-searchlabel" class="btn bnt-default">
        <span class="glyphicon glyphicon-search">
        </span>
    </button>
</form>

但我无法让它发挥作用。有人可以帮帮我吗？我无法弄清楚我做错了什么。

Answer 1

将输入类型提交按钮放在您的内容中，如果您真的不需要，请在屏幕上隐藏该按钮。现在，当您按 Enter 时，它会发布您的表单数据。

  Example:  
      <input type="submit" style="position: absolute; left: -9999px"/>

Answer 2

首先：如果用户按 Enter ，您确定要重新加载整个页面吗？

更好的解决方案是将此事件添加到表单中的输入中：

$(function(){
    $('.enter > input, textarea, select').keyup(function(evt){
        if(evt.which == 13) {
            $('.enter').submit();
        }
    });
});

当我按回车键时，我想要我的表单进行搜索

2 个答案: