高能预警！前端大佬秘技揭秘，页面内极速查找，让搜索更精准！

2023-05-11 04:41:04

在网页中轻松打造局部搜索功能，提升用户体验

引言

网页搜索对于用户来说是至关重要的，它能帮助他们快速找到所需信息。然而，浏览器自带的全局搜索功能往往无法满足局部搜索的需求，特别是当网页内容较多或包含多个区块时。本文将揭秘一个打造局部搜索功能的秘籍，让你轻松实现页面内特定区域的搜索。

第一步：HTML代码布局

在HTML代码中预留搜索框和搜索结果区域的位置：

<div id="search-container">
  <input type="text" id="search-input" placeholder="Search">
  <button type="button" id="search-button">Search</button>
</div>

<div id="search-results"></div>

第二步：CSS样式美化

美化搜索框和搜索结果区域的外观：

#search-container {
  position: relative;
  width: 100%;
}

#search-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

#search-button {
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f00;
  color: #fff;
  cursor: pointer;
}

#search-results {
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin-top: 10px;
}

.search-result {
  padding: 5px;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}

.search-result:hover {
  background-color: #f00;
  color: #fff;
}

第三步：JavaScript功能实现

编写JavaScript代码实现局部搜索功能：

const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');
const searchResults = document.getElementById('search-results');

// 监听搜索框回车事件
searchInput.addEventListener('keydown', (e) => {
  if (e.keyCode === 13) {
    performSearch();
  }
});

// 监听搜索按钮点击事件
searchButton.addEventListener('click', () => {
  performSearch();
});

function performSearch() {
  // 获取搜索关键词
  const searchTerm = searchInput.value;

  // 清空搜索结果区域
  searchResults.innerHTML = '';

  // 遍历页面中的所有元素
  const elements = document.querySelectorAll('*');

  // 查找并高亮显示包含搜索关键词的元素
  elements.forEach((element) => {
    const elementText = element.textContent;
    const index = elementText.indexOf(searchTerm);
    if (index > -1) {
      // 创建一个新的元素来包裹搜索关键词
      const span = document.createElement('span');
      span.style.backgroundColor = 'yellow';
      span.textContent = searchTerm;

      // 将搜索关键词替换为新的元素
      elementText = elementText.replace(searchTerm, span.outerHTML);

      // 将修改后的元素内容重新赋值给元素
      element.innerHTML = elementText;

      // 将元素添加到搜索结果区域
      searchResults.appendChild(element);
    }
  });
}