搜索 HTML 和 ScrollTo

Question

所以我有一个包含 2000 多个条目的文档列表。我想添加某种形式的搜索功能。显然，我有一个输入栏，但是我该如何编写搜索页面和 ScrollTo 到该位置的 javascript？

Answer 1

您可以使用 window.find 和 range.findText

<input id="search" >
<input type="button" value="search" onclick="fx(document.getElementById('search'))">
<script type="text/javascript">
<!--
function fx(o)
{ 
  var _o=o;
  if(window.find)
  { 
    _o.style.visibility='hidden';
    setTimeout(function(){window.find(_o.value);_o.style.visibility='visible';},10);
  }
  else if(document.body.createTextRange)
  {
    var rng=document.body.createTextRange();
        rng.findText(o.value);
        rng.select();
  }
}
//-->
</script>

Answer 2

循环遍历您要搜索的元素。递归地遍历子节点并使用正则表达式搜索每个子节点，可能类似于 /\bTERM\b/。

当您找到一个时，找到其偏移位置，然后 scrollTo() 该偏移量。