如何在html页面中实现查找功能-猿码集

如何在html页面中实现查找功能

现在越来越多的网站都会提供查找功能，这也是一个不错的用户体验。在html页面中实现查找功能其实也很简单，下面将会详细介绍如何实现。

1.简单的查找功能

实现简单的查找功能，我们可以借助html页面的搜索框，使用html内置的input标签就可以实现。步骤如下：

在html文件中添加一个input标签和一个按钮

使用JavaScript处理搜索事件

下面是示例代码：


  <input type="text" id="search-field" placeholder="请输入搜索内容">
  <button id="search-btn">搜索</button>

然后我们给按钮添加点击事件，添加JavaScript代码：


  document.querySelector('#search-btn').addEventListener('click', function() {
    var searchVal = document.querySelector('#search-field').value;
    window.find(searchVal);
  });

使用window.find()方法可以实现页面查找，注意这个方法不被所有浏览器兼容，需要测试你使用的浏览器是否兼容。

2.更加高级的查找功能

如果要实现更加高级的查找功能，我们可以使用JavaScript结合CSS来实现这个目标。我们可以在页面上显示一个遮罩层，当用户输入搜索关键字时，我们使用javascript获取所有匹配元素的位置，然后将它们高亮显示。下面介绍具体步骤：

在页面上添加遮罩层元素

使用CSS样式使遮罩层覆盖在页面上

使用JavaScript处理搜索事件

下面是示例代码：


  <div id="overlay"></div>
  <div id="search-box">
    <input type="text" id="search-field" placeholder="请输入搜索内容">
    <button id="search-btn">搜索</button>
  </div>

然后是CSS样式：


  #overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: rgba(0,0,0,.8);
    display: none;
  }
  
  .highlight {
    background-color: yellow;
  }

以上是遮罩层和高亮样式的代码示例。

最后是处理搜索事件的JavaScript代码：


  var searchBtn = document.querySelector('#search-btn');
  var searchField = document.querySelector('#search-field');
  var overlay = document.querySelector('#overlay');
  
  searchBtn.addEventListener('click', function() {
    var searchText = searchField.value.toLowerCase();
    if(searchText !== '') {
      var matches = document.querySelectorAll('body *:not(script)');
      for(var i = 0; i < matches.length; i++) {
        var text = matches[i].textContent.toLowerCase();
        if(text.includes(searchText)) {
          var el = matches[i];
          var range = document.createRange();
          range.selectNode(el);
          var selection = window.getSelection();
          selection.removeAllRanges();
          selection.addRange(range);
          overlay.style.display = 'block';
          el.classList.add('highlight');
        }
      }
    }
  });

以上代码将匹配所有的非script节点（因为script节点中可能也包含要搜索的文本），并将匹配到的文本高亮显示。

总结

以上两种方式都可以在HTML页面中实现查找功能，其中简单的查找功能使用基本的JavaScript，而高级的查找功能更加高级，这需要使用更多的JavaScript和CSS。根据你的需求选择合适的方式，为你的网站提供更好的用户体验。

如何在html页面中实现查找功能