动态加载，点石成金：静态页面搜索功能再升级！

2022-12-22 23:46:32

解锁您的网站：利用 XML 和 JavaScript 构建强大的搜索功能

在浩瀚的互联网海洋中，让用户轻松找到所需信息至关重要。传统的网站搜索功能往往笨重且耗时，但现在有一个杀手锏：使用 XML 和 JavaScript 动态加载数据来实现无缝搜索体验。

搭建搜索舞台

首先，创建一个 XML 文件，包含您网站所有页面的标题、链接和简介。使用您喜欢的文本编辑器，如记事本或 TextEdit，即可完成此操作。

编写搜索脚本

接下来，编写一个 JavaScript 脚本，从 XML 文件中提取数据并处理搜索请求。以下是脚本：

// 定义变量
var xmlDoc, input, filter, ul, li, a, i, txtValue;

// 加载 XML 文件
xmlDoc = new XMLHttpRequest();
xmlDoc.open("GET", "data.xml", true);
xmlDoc.send();

// 监听 XML 文件加载完成事件
xmlDoc.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    // 将 XML 文件转换成 DOM 对象
    xmlDoc = xmlDoc.responseXML;

    // 获取搜索输入框
    input = document.getElementById("myInput");

    // 监听搜索输入框的输入事件
    input.addEventListener("input", function() {
      // 获取输入的搜索内容
      filter = input.value.toUpperCase();

      // 获取结果列表
      ul = document.getElementById("myList");

      // 获取结果列表中的所有项目
      li = ul.getElementsByTagName("li");

      // 循环结果列表中的所有项目
      for (i = 0; i < li.length; i++) {
        // 获取当前项目的标题
        a = li[i].getElementsByTagName("a")[0];
        txtValue = a.textContent || a.innerText;

        // 如果标题包含搜索内容，则显示当前项目
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          li[i].style.display = "";
        } else {
          // 否则，隐藏当前项目
          li[i].style.display = "none";
        }
      }
    });
  }
};