Javascript 将事件更改为打开。单击以搜索术语

我在下面找到了这个片段，它突出显示并跳转到搜索的词。当前代码段在用户输入的每一次击键后进行搜索，这会给服务器带来太大的压力。相反，我希望它在用户按enter键或单击next按钮时标记并跳转。我尝试更改以下行，但它破坏了代码。有什么想法吗

$input.on("input", function() {

到

代码如下：

$(function() {

  // the input field
  var $input = $("input[type='search']"),
    // clear button
    $clearBtn = $("button[data-search='clear']"),
    // prev button
    $prevBtn = $("button[data-search='prev']"),
    // next button
    $nextBtn = $("button[data-search='next']"),
    // the context where to search
    $content = $(".content"),
    // jQuery object to save <mark> elements
    $results,
    // the class that will be appended to the current
    // focused element
    currentClass = "current",
    // top offset for the jump (the search bar)
    offsetTop = 50,
    // the current index of the focused element
    currentIndex = 0;

  /**
   * Jumps to the element matching the currentIndex
   */
  function jumpTo() {
    if ($results.length) {
      var position,
        $current = $results.eq(currentIndex);
      $results.removeClass(currentClass);
      if ($current.length) {
        $current.addClass(currentClass);
        position = $current.offset().top - offsetTop;
        window.scrollTo(0, position);
      }
    }
  }

  /**
   * Searches for the entered keyword in the
   * specified context on input
   */
  $input.on("input", function() {
    var searchVal = this.value;
    $content.unmark({
      done: function() {
        $content.mark(searchVal, {
          separateWordSearch: true,
          done: function() {
            $results = $content.find("mark");
            currentIndex = 0;
            jumpTo();
          }
        });
      }
    });
  });

  /**
   * Clears the search
   */
  $clearBtn.on("click", function() {
    $content.unmark();
    $input.val("").focus();
  });

  /**
   * Next and previous search jump to
   */
  $nextBtn.add($prevBtn).on("click", function() {
    if ($results.length) {
      currentIndex += $(this).is($prevBtn) ? -1 : 1;
      if (currentIndex < 0) {
        currentIndex = $results.length - 1;
      }
      if (currentIndex > $results.length - 1) {
        currentIndex = 0;
      }
      jumpTo();
    }
  });
});

$（函数（）{
//输入字段
var$input=$（“input[type='search']），
//清除按钮
$clearBtn=$（“按钮[data search='clear']），
//上一个按钮
$prevBtn=$（“按钮[data search='prev']），
//下一个按钮
$nextBtn=$（“按钮[data search='next']），
//要搜索的上下文
$content=$（“.content”），
//用于保存元素的jQuery对象
$results，
//将附加到当前对象的类
//聚焦元件
currentClass=“当前”，
//跳转的顶部偏移（搜索栏）
偏移量=50，
//聚焦元素的当前索引
currentIndex=0；
/**
*跳转到与currentIndex匹配的元素
*/
函数jumpTo（）{
如果（$results.length）{
var位置，
$current=$results.eq（currentIndex）；
$results.removeClass（currentClass）；
如果（$current.length）{
$current.addClass（currentClass）；
位置=$current.offset（）.top-offsetTop；
滚动到（0，位置）；
}
}
}
/**
*在中搜索输入的关键字
*输入时指定的上下文
*/
$input.on（“输入”，函数（）{
var searchVal=this.value；
$content.unmark({
完成：函数（）{
$content.mark（searchVal{
separateWordSearch：对，
完成：函数（）{
$results=$content.find（“标记”）；
currentIndex=0；
跳到（）；
}
});
}
});
});
/**
*清除搜索
*/
$clearBtn.on（“单击”，函数（）{
$content.unmark（）；
$input.val（“”.focus（）；
});
/**
*下一个和上一个搜索跳转到
*/
$nextBtn.add（$prevBtn）.on（“单击”，函数（））{
如果（$results.length）{
currentIndex+=$（this）.is（$prevBtn）？-1:1；
如果（当前索引<0）{
currentIndex=$results.length-1；
}
如果（当前索引>$results.length-1）{
currentIndex=0；
}
跳到（）；
}
});
});

---

在这里可以找到正在工作的JSFIDLE:

您可以将（'input'）上的

$input.on更改为：

$input.on("keypress", function(e) {
  if (e.which === 13) {
    var searchVal = this.value;
    $content.unmark({
      done: function() {
        $content.mark(searchVal, {
          separateWordSearch: true,
          done: function() {
            $results = $content.find("mark");
            currentIndex = 0;
            jumpTo();
          }
        });
      }
    });
  }
});

这将处理按文本框中的
enter
。下一步按钮单击更新，请参见此小提琴：

基本方法是将内容标记功能化，并在
$input
按键上调用它，如果没有结果，也可以在下一次/上一次单击中调用它

但是仍然存在一些问题，例如如果值发生更改，您不能使用“下一步/上一步”按钮进行搜索，因此需要进行一些额外的工作。
嘿，安东尼，谢谢您的回复，看起来这也不起作用。这里有一个更新的链接，代码是：完美！！非常感谢你。jQuery部分有问题。。现在，如果我想让下一步按钮也搜索，你会推荐什么呢？下一步按钮有点棘手，因为它也是为了进入下一场比赛。如果有结果，它应该继续这样做吗？这就是我所希望的，如果他们点击它，它将带他们到第一个找到的结果，如果他们再次点击到下一个结果。。如果更简单的话，enter甚至可以具有相同的功能。如果您继续单击“输入”，它将跳到下一步。你认为最简单的是什么？用新提琴更新。无法使依赖项在代码段中工作
$input.on("keypress", function(e) {
  if (e.which === 13) {
    var searchVal = this.value;
    $content.unmark({
      done: function() {
        $content.mark(searchVal, {
          separateWordSearch: true,
          done: function() {
            $results = $content.find("mark");
            currentIndex = 0;
            jumpTo();
          }
        });
      }
    });
  }
});