在链接列表中搜索元素的 Javascript 程序

本篇介绍的 Javascript 程序旨在帮助开发者在一个链接列表中搜索元素。该程序可以用于网页开发中的多处场景，例如搜索栏自动提示、表单输入验证等。

实现思路

该程序实现的核心就是通过遍历链接列表，寻找匹配的元素。具体来说，其实现思路如下：

1. 获取需要搜索的文本 str 和链接列表 links。

2. 遍历链接列表 links 并循环执行以下操作：

   （1）获取当前链接元素的文本内容 text。

   （2）如果当前链接元素的文本内容包含 str，那么该元素就是要查找的目标元素，立即退出循环。

3. 返回查找结果。如果找到目标元素，则返回该元素的 index；否则返回 -1。

代码实现

下面是该程序的代码实现，推荐将其封装为一个函数，以便于在项目中复用：

/**
 * 在链接列表中搜索元素
 * @param {string} str 要搜索的文本
 * @param {array} links 链接列表
 * @returns {number} 匹配元素的 index（找到）或 -1（未找到）
 */
function searchLinkList(str, links) {
  for (let i = 0; i < links.length; i++) {
    const text = links[i].textContent;
    if (text.includes(str)) {
      return i;
    }
  }
  return -1;
}

使用示例

下面是该程序的使用示例，假设我们有以下 HTML 代码：

<ul id="link-list">
  <li><a href="#">Google</a></li>
  <li><a href="#">Baidu</a></li>
  <li><a href="#">Apple</a></li>
  <li><a href="#">Microsoft</a></li>
</ul>

<input type="text" id="search-input" placeholder="Search">

我们可以通过以下代码，在输入框中实现链接列表的搜索功能：

const linkList = document.querySelectorAll('#link-list li a');
const searchInput = document.querySelector('#search-input');

searchInput.addEventListener('keyup', () => {
  const str = searchInput.value.toLowerCase();
  const index = searchLinkList(str, linkList);
  if (index > -1) {
    linkList[index].classList.add('highlight');
  } else {
    linkList.forEach(link => link.classList.remove('highlight'));
  }
});

上述代码将会在输入框中监听 keyup 事件，并在每次输入后自动搜索链接列表，并高亮匹配的元素。

结语

以上就是本文介绍的用于在链接列表中搜索元素的 Javascript 程序。在实际项目中，我们也可以通过改写其实现思路，实现更复杂的功能，例如对搜索结果进行排序、模糊匹配、支持多个关键词等。