Question

我写了以下脚本。它侦听搜索文本输入字段，并获取值并转发到我的搜索页面（在/ Home / Search）。

<script type="text/javascript">
    $("#search").on('keydown', function (e) {
        var searchVal = $("#search").val();
        if (e.keyCode == 13) {
            var url = '/Home/Search?' + searchVal;
            window.location.href = url;
        }
    });
</script>

出于某种原因，它没有做任何事情。我当前的页面位置永远不会改变，并且“？”只是附加到我当前URL的末尾。

想知道是否有人有任何想法。感谢!!!

编辑此处有效：https://municipalagenda.com/

顶部的搜索栏+点击输入字段会触发上述JavaScript功能。

Answer 1

它不起作用的原因是因为你在表单元素中有输入文本字段。因此，当您按Enter键时，表单会在您点击您的keydown事件之前提交。

更改此

<form class="navbar-form navbar-left">
        <i class="fa fa-search"></i>
        <input type="text" id="search" class="form-control" placeholder="Search Municipal Agenda">
</form>

到

<span class="navbar-form navbar-left">
        <i class="fa fa-search"></i>
        <input type="text" id="search" class="form-control" placeholder="Search Municipal Agenda">
</span>

Answer 2

问题发生的原因是因为您的表单试图在您尝试加载网址的同时发布。

禁用表单的默认事件，然后它应该可以正常工作

$('.navbar-form').on('submit', function(e){
    e.preventDefault();
});

Javascript手动设置URL

2 个答案: