如何使用回车键触发搜索答案

【问题标题】：how do i trigger search with the enter key如何使用回车键触发搜索
【发布时间】：2015-02-02 19:49:39
【问题描述】：

我需要使用回车键触发搜索，但它不起作用，这是我使用的代码。任何帮助将不胜感激。

 $('#header input[name=\'search\']').bind('click', function(e) {

    if (e.keyCode == 13) {

        url = $('base').attr('href') + 'index.php?route=product/search';

        var search = $('input[name=\'search\']').attr('value');

        if (search) {
            url += '&search=' + encodeURIComponent(search);
        }

        location = url;
    }
});

【问题讨论】：

标签： javascript jquery search keydown

【解决方案1】：

您很可能想要捕捉 keyup 事件而不是点击

 $('#header input[name=\'search\']').bind('keyup', function(e) {

    if (e.keyCode == 13) {
        console.log("FOOOOOO");
        url = $('base').attr('href') + 'index.php?route=product/search';

        var search = $('input[name=\'search\']').attr('value');

        if (search) {
            url += '&search=' + encodeURIComponent(search);
        }
        console.log("url: "+url);
        window.location.href  = url;
    }
});

我不知道你想达到什么目的，但我会编写这个选择器：

$('#header input[name="search"]')...

更新

// 
$('input[name="search"]').bind("enterKey",function(e){
   console.log("yeah i just triggered");
});


$('input[name="search"]').keyup(function(e){
    if(e.keyCode == 13)
    {
        $(this).trigger("enterKey");
    }
});

【讨论】：

什么不起作用，检查我更新的示例，浏览器控制台是否记录“FOOOOOO”？它为“url：？”记录了什么？
我认为你在控制台中有一些错误，或者这不起作用：url = $('base').attr('href')

【解决方案2】：

如果可以的话，你最好用

<input type="submit" value="">

将输入包装到<form>

风格化按钮

input[type='submit'] {height: 0; width: 0; overflow: hidden;}

如果您需要在 javascript 中更改操作 url，请使用类似

$('form').submit ( function() {
    $(this).attr('action','/route-to-submit');
})

【讨论】：

@elmage 您已经拥有<div class="button-search" title="Search"></div> 元素，您唯一需要做的就是将div 更改为<input type="submit">，正如我上面评论的那样。
@elmage 将 <div class="button-search" title="Search"></div> 更改为 <input class="button-search" type="submit" value=""> 并将输入包装到 <form action="/index.php?route=product/search"> ... </form>
@elmage 首先，您的操作网址非常非常糟糕。使用相对路径action="/index.php?route=product/search"，不包含域名
@elmage 并注释您的 js 代码以确保它不会损坏所有内容（顺便说一句，您的 js 可以插入 domain in action 属性）