简单页面搜索的代码问题

是指在一个网页中实现简单的搜索功能。下面是一个示例的代码实现：

HTML部分：

<form id="search-form">
  <input type="text" id="search-input" placeholder="请输入搜索关键词">
  <button type="submit">搜索</button>
</form>
<div id="search-results"></div>

JavaScript部分：

document.getElementById("search-form").addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单提交的默认行为

  var keyword = document.getElementById("search-input").value;
  var results = performSearch(keyword); // 调用搜索函数获取结果

  displayResults(results); // 显示搜索结果
});

function performSearch(keyword) {
  // 在这里编写搜索逻辑，可以使用后端API或者本地数据进行搜索
  // 返回搜索结果的数组
  // 示例：假设有一个本地数据数组，包含了一些文本内容
  var data = [
    "Lorem ipsum dolor sit amet",
    "consectetur adipiscing elit",
    "sed do eiusmod tempor incididunt",
    "ut labore et dolore magna aliqua"
  ];

  var results = [];
  for (var i = 0; i < data.length; i++) {
    if (data[i].toLowerCase().includes(keyword.toLowerCase())) {
      results.push(data[i]);
    }
  }

  return results;
}

function displayResults(results) {
  var container = document.getElementById("search-results");
  container.innerHTML = ""; // 清空之前的搜索结果

  if (results.length === 0) {
    container.innerHTML = "没有找到相关结果";
  } else {
    for (var i = 0; i < results.length; i++) {
      var resultItem = document.createElement("p");
      resultItem.textContent = results[i];
      container.appendChild(resultItem);
    }
  }
}

这段代码实现了一个简单的页面搜索功能。用户在输入框中输入关键词后，点击搜索按钮，会触发表单的提交事件。在事件处理函数中，获取用户输入的关键词，然后调用performSearch函数进行搜索。performSearch函数根据关键词在数据中进行匹配，将匹配到的结果存入一个数组，并返回该数组。最后，调用displayResults函数将搜索结果显示在页面上。

这个简单的页面搜索功能可以应用于各种网站和应用中，例如博客、论坛、电子商务网站等。用户可以通过输入关键词来搜索相关内容，提高信息的查找效率。

腾讯云相关产品和产品介绍链接地址：