使用 jquery 搜索没有提交按钮答案

【问题标题】：Search without submit button with jquery使用 jquery 搜索没有提交按钮
【发布时间】：2014-02-26 11:46:55
【问题描述】：

我需要在 Opencart 搜索中为输入元素添加类（在 header.tpl 中）

HTML 代码：

<input type="text" name="search" id="input-search" class=""/>

查询代码：

<script type="text/javascript">
 $(document).ready(function() {
  $("#input-search").keyup(function (e) {
   if (e.keyCode == 13) {
    $("#input-search").addClass("button-search");  
   }
  });
 });    
</script>

我正在使用 Opencart 并重定向到您必须具有类 .button-search 的搜索页面。我不想有提交按钮。
当我在输入中添加一些文本然后按 Enter 时，脚本应该向输入添加类并重定向到 Opencart 搜索页面。

【问题讨论】：

我不认为只将类添加到输入元素会提交表单。需要用js提交。
@Jai 在 Opencart 中，您无法在搜索中找到表单。是的，我有 js 文件（common.js）并且定义了 .button-search
window.location.href = "../yoursearchpageurl" + $(this).serialize(); 这样就可以了。像这样更改网址“../yoursearchpageurl”，这将是您的搜索页面网址。
@viktorR 你会发布你的搜索页面网址吗？

标签： javascript jquery html opencart

【解决方案1】：

这是你想要的哥们。

代码：http://jsfiddle.net/webcarvers/xdt7g/1/ 预览：http://jsfiddle.net/webcarvers/xdt7g/1/embedded/result/

HTML

JS

$("#inputSearch").on('keypress',function (e) {
   if (e.keyCode == 13) {
    $("#inputSearch").addClass("buttonSearch");
       $("p").text("Class added = " + $("#inputSearch").attr("class"));
       window.location.replace("http://www.yahoo.com/")
   }
});

【讨论】：

【解决方案2】：

当按钮在表单中时，您可以提交它：

<script type="text/javascript">
 $(document).ready(function() {
  $("#input-search").keyup(function (e) {
   if (e.keyCode == 13) {
    $("#input-search").addClass("button-search");  
    $(this).closest('form').submit();
   }
  });
 });    
</script>

【讨论】：

【解决方案3】：

您需要使用如下事件委托方法：

$('body').on('keyup','#input-search', function (e) {
   if (e.keyCode == 13) {
    $(this).addClass("button-search");  
   }
  });

【讨论】：

【解决方案4】：

如果您只想重定向到具有input 值的页面，您可以执行以下操作window.location.href = "?search=" + this.value;

你的代码会是这样的：

<script type="text/javascript">
 $(document).ready(function() {
  $("#input-search").keyup(function (e) {
   var kc = e.keyCode || e.which;
   if (kc == 13) {
    $("#input-search").addClass("button-search");
    window.location.href = "?search=" + this.value;
   }
  });
 });    
</script>

【讨论】：

【解决方案5】：

你可以改成这样：

<script type="text/javascript">
 $(document).ready(function() {
  $("#input-search").keyup(function (e) {
   var kc = e.keyCode || e.which;
   if (kc == 13) {
      $(this).addClass("button-search");// get the current context with 'this'
      window.location.href = "../yoursearchpageurl?" + $(this).serialize();
   }
  });
 });    
</script>

正如您提到的，您的页面中没有表单，因此当您将类添加到按钮之后，您可以按照$(this).serialize() 的建议更改您的页面网址

【讨论】：

@dreamweiver OP 在他的页面中没有表单，因此不需要提交按钮。 正如 OP 在他的帖子评论中评论的那样
你知道什么，你现在刚刚编辑了答案，这使我的评论超出了范围，所以删除它。