咨询：如何实现回车键触发搜索按钮功能？

嘿，我看你想实现用户按下回车键就触发搜索的功能，现在的代码没生效是因为你把keydown事件绑定到了#search-button按钮上——但用户输入完搜索内容后，焦点通常是停在搜索输入框#search-input里的，按回车的时候这个事件根本不会触发到按钮上，所以没效果。

给你两种靠谱的解决方案：

方案一：监听输入框的回车键事件 #

直接给搜索输入框绑定keydown事件，这样用户在输入框里按回车时就能触发搜索：

$(document).ready(function() {
  // 保留原有的点击搜索逻辑
  $("#search-button").click(function(){
    Trackster.searchTracksByTitle($("#search-input").val());
  });

  // 给输入框添加回车键监听
  $("#search-input").keydown(function(event){
    // 兼容不同浏览器的回车判断（keyCode是旧写法，key是新标准）
    if (event.keyCode === 13 || event.key === 'Enter') {
      Trackster.searchTracksByTitle($(this).val());
      event.preventDefault(); // 防止页面默认的回车提交行为（比如有表单时会跳转）
    }
  });
});

方案二：利用表单的submit事件（更优雅） #

如果你的搜索框和按钮是放在<form>标签里的（没有的话可以手动包一下），直接监听表单的submit事件会更符合HTML原生行为——不管是点击搜索按钮，还是在输入框按回车，都会触发这个事件：

先调整HTML结构（如果没有表单的话）：

<form id="search-form">
  <input type="text" id="search-input" placeholder="输入歌曲名搜索">
  <button type="submit" id="search-button">搜索</button>
</form>

然后对应的JS代码：

$(document).ready(function() {
  $("#search-form").submit(function(event){
    event.preventDefault(); // 阻止表单默认的跳转提交行为
    Trackster.searchTracksByTitle($("#search-input").val());
  });
});

这种方式不用分别绑定点击和回车事件，代码更简洁，也更符合用户的使用习惯。

内容的提问来源于stack exchange，提问作者Terence