如何构建一个可点击且支持自定义URL的搜索栏-js教程-PHP中文网

如何构建一个可点击且支持自定义URL的搜索栏

本教程详细指导如何创建一个交互式搜索栏，使其搜索结果不仅能显示匹配文本，还能链接到与文本内容无关的自定义url。文章将介绍如何通过并行数据结构管理显示文本和对应的链接，并利用javascript和css实现高效的搜索过滤和样式切换。

在现代Web应用中，搜索功能是提升用户体验的关键一环。一个常见的需求是，搜索结果不仅要能根据用户输入进行过滤显示，而且每个结果都应该是一个可点击的链接，指向一个特定的页面。更进一步，这些链接的URL可能与搜索结果的显示文本并不直接相关，例如，显示“澳大利亚”但链接到/travel/page001.html。本教程将详细介绍如何构建一个满足这些需求的搜索栏。

核心概念：显示文本与自定义URL的关联

要实现显示文本与自定义URL的解耦，我们需要一种机制来存储和关联这两部分信息。最直观且易于管理的方式是使用两个并行数组，或者一个包含对象的数组。本教程将采用并行数组的方式，因为它更直接地反映了显示文本和其对应URL的一一映射关系。

例如，我们有以下显示文本和对应的URL：

// 显示给用户的文本
const displayTexts = [
  'Australia',
  'Austria',
  'Brazil',
  'Canada',
  'Denmark',
  'Egypt',
  'France',
  'Germany',
  'USA',
  'Vietnam'
];

// 每个文本对应的自定义URL
const customUrls = [
  '/travel/page001.html',
  '/travel/page002.html',
  '/travel/page003.html',
  '/travel/page004.html',
  '/travel/page005.html',
  '/travel/page006.html',
  '/travel/page007.html',
  '/travel/page008.html',
  '/travel/page009.html',
  '/travel/page010.html'
];

登录后复制

重要提示： 确保 displayTexts 和 customUrls 数组的长度一致，并且相同索引位置的元素是相互对应的。

HTML结构：搜索输入框与结果容器

首先，我们需要一个基本的HTML结构来承载搜索输入框和动态生成的搜索结果列表。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义URL搜索栏</title>
  <link rel="stylesheet" href="styles.css"> <!-- 引入样式文件 -->
</head>
<body>
  <div class="container">
    <h2>搜索目的地</h2>
    <input id="searchbar" autocomplete="off" onkeyup="search()" type="text" 
           name="search" placeholder="您想去哪里？">
    <div id="list"></div> <!-- 搜索结果将动态添加到这里 -->
  </div>
  <script src="script.js"></script> <!-- 引入JavaScript文件 -->
</body>
</html>

登录后复制

在这个结构中：

<input id="searchbar" ...> 是用户输入搜索关键词的文本框。onkeyup="search()" 会在每次按键抬起时触发 search 函数。
<div id="list"></div> 是一个容器，用于显示匹配的搜索结果。

JavaScript实现：数据加载与链接创建

接下来，我们编写JavaScript代码来加载数据并动态生成可点击的搜索结果。

1. 数据加载函数 loadSearchData()

这个函数负责从我们定义的数据源（displayTexts 和 customUrls）中读取数据，并为每个项目创建一个 <a> 标签，将其添加到HTML中的 #list 容器内。

// script.js
const displayTexts = [
  'Australia', 'Austria', 'Brazil', 'Canada', 'Denmark',
  'Egypt', 'France', 'Germany', 'USA', 'Vietnam'
];

const customUrls = [
  '/travel/page001.html', '/travel/page002.html', '/travel/page003.html',
  '/travel/page004.html', '/travel/page005.html', '/travel/page006.html',
  '/travel/page007.html', '/travel/page008.html', '/travel/page009.html',
  '/travel/page010.html'
];

function loadSearchData() {
  const listContainer = document.getElementById('list');

  // 遍历显示文本数组，并使用索引获取对应的URL
  displayTexts.forEach((text, index) => {
    const a = document.createElement("a");
    a.innerText = text; // 设置链接的显示文本
    a.href = customUrls[index]; // 设置链接的自定义URL
    a.classList.add("listItem"); // 添加一个CSS类，用于样式控制
    listContainer.appendChild(a);
  });
}

// 页面加载完成后立即执行数据加载
document.addEventListener('DOMContentLoaded', loadSearchData);

登录后复制

这里我们使用了 document.addEventListener('DOMContentLoaded', loadSearchData); 来确保在DOM完全加载后再执行 loadSearchData 函数，这比直接在 <body> 标签上使用 onload 属性更为现代和推荐。

2. 搜索过滤函数 search()

这个函数会在用户输入时被调用，负责根据输入过滤并显示匹配的搜索结果。我们采用一种更优雅的CSS类切换方式来控制元素的显示状态，而非直接修改 style.display。

Spacely AI

为您的房间提供AI室内设计解决方案，寻找无限的创意

查看详情

// script.js (接上文)

function search() {
  const input = document.getElementById('searchbar').value.toLowerCase();
  const links = document.querySelectorAll("#list a"); // 获取所有结果链接

  links.forEach((link) => {
    // 检查链接的文本内容是否包含用户输入，且输入不为空
    const isMatch = link.textContent.toLowerCase().includes(input);
    const shouldDisplay = isMatch && input !== "";

    // 根据匹配条件，切换 'active' 类
    // 如果 shouldDisplay 为 true，则添加 'active' 类；否则移除 'active' 类
    link.classList.toggle("active", shouldDisplay);
  });
}

登录后复制

classList.toggle("active", condition) 是一个非常实用的方法。当 condition 为 true 时，它会添加 active 类；当 condition 为 false 时，它会移除 active 类。这种方式将元素的显示逻辑与样式定义分离，使得代码更清晰，样式更易于管理。

CSS样式：控制结果显示

为了让 search() 函数中的 active 类生效，我们需要定义相应的CSS规则。

/* styles.css */

/* 默认情况下隐藏所有搜索结果链接 */
#list a {
  display: none;
  padding: 8px 12px;
  margin-bottom: 4px;
  background-color: #f0f0f0;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  transition: background-color 0.2s ease;
}

/* 当链接具有 'active' 类时，显示它 */
#list a.active {
  display: flex; /* 或 display: block; 根据布局需求选择 */
  align-items: center; /* 如果使用 flex，可以居中内容 */
}

#list a:hover {
  background-color: #e0e0e0;
}

/* 容器和输入框的基础样式 */
.container {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

h2 {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

#searchbar {
  width: calc(100% - 24px); /* 减去 padding */
  padding: 10px 12px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

#searchbar:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

登录后复制

这里，#list a { display: none; } 确保了所有链接在默认情况下是隐藏的。只有当一个链接被 search() 函数添加了 active 类时，#list a.active { display: flex; } 规则才会生效，使其显示出来。

完整代码示例

将以上HTML、CSS和JavaScript代码分别保存为 index.html、styles.css 和 script.js，即可运行一个功能完整的、支持自定义URL的搜索栏。

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义URL搜索栏</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h2>搜索目的地</h2>
    <input id="searchbar" autocomplete="off" onkeyup="search()" type="text" 
           name="search" placeholder="您想去哪里？">
    <div id="list"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

登录后复制

styles.css

body {
  font-family: Arial, sans-serif;
  background-color: #f4f7f6;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
}

.container {
  max-width: 600px;
  width: 90%;
  margin-top: 50px;
  padding: 20px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

h2 {
  text-align: center;
  color: #333;
  margin-bottom: 25px;
  font-size: 24px;
}

#searchbar {
  width: calc(100% - 24px); /* Adjust for padding */
  padding: 12px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
  box-sizing: border-box; /* Include padding in width */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#searchbar:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
}

#list {
  display: flex;
  flex-direction: column;
  gap: 8px; /* Space between list items */
}

#list a {
  display: none; /* Hidden by default */
  padding: 10px 15px;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 5px;
  text-decoration: none;
  color: #343a40;
  transition: background-color 0.2s ease, transform 0.1s ease;
  font-size: 15px;
}

#list a.active {
  display: flex; /* Show when active */
  align-items: center;
}

#list a:hover {
  background-color: #e2e6ea;
  transform: translateY(-1px);
}

登录后复制

script.js

const displayTexts = [
  'Australia', 'Austria', 'Brazil', 'Canada', 'Denmark',
  'Egypt', 'France', 'Germany', 'USA', 'Vietnam'
];

const customUrls = [
  '/travel/page001.html', '/travel/page002.html', '/travel/page003.html',
  '/travel/page004.html', '/travel/page005.html', '/travel/page006.html',
  '/travel/page007.html', '/travel/page008.html', '/travel/page009.html',
  '/travel/page010.html'
];

function loadSearchData() {
  const listContainer = document.getElementById('list');

  displayTexts.forEach((text, index) => {
    const a = document.createElement("a");
    a.innerText = text;
    a.href = customUrls[index];
    a.classList.add("listItem");
    listContainer.appendChild(a);
  });
}

function search() {
  const input = document.getElementById('searchbar').value.toLowerCase();
  const links = document.querySelectorAll("#list a");

  links.forEach((link) => {
    const isMatch = link.textContent.toLowerCase().includes(input);
    const shouldDisplay = isMatch && input !== "";

    link.classList.toggle("active", shouldDisplay);
  });
}

document.addEventListener('DOMContentLoaded', loadSearchData);

登录后复制

注意事项与最佳实践

数据同步： 确保 displayTexts 和 customUrls 数组的长度和顺序始终保持一致。任何不匹配都将导致链接指向错误的页面。对于更复杂的数据，考虑使用一个包含对象的数组，例如 [{ text: 'Australia', url: '/travel/page001.html' }]，这样可以更好地将相关数据捆绑在一起，减少出错的可能性。
性能优化： 对于包含大量搜索结果的列表（例如，几百甚至上千项），每次按键都遍历所有DOM元素并修改类可能会造成性能瓶颈。可以考虑以下优化：
- 去抖动（Debounce）： 使用去抖动技术限制 search() 函数的调用频率，例如在用户停止输入一段时间后才执行搜索。
- 虚拟滚动（Virtual Scrolling）： 对于超大型列表，只渲染当前可见的元素，而不是所有元素。
可访问性（Accessibility）：
- 为搜索输入框添加 aria-label 或 label 元素，以提高屏幕阅读器的可访问性。
- 考虑为搜索结果区域添加 aria-live="polite" 属性，以便屏幕阅读器在结果更新时通知用户。
样式定制： 使用 active 类提供了极大的灵活性。你可以通过CSS为活动状态的搜索结果添加不同的背景色、边框、字体样式，甚至动画效果。

总结

通过本教程，我们学习了如何构建一个功能强大的搜索栏，它不仅能够根据用户输入实时过滤结果，还能将每个结果链接到预定义的自定义URL。核心在于通过并行数据结构（或对象数组）来管理显示文本和URL之间的映射关系，并利用JavaScript动态生成DOM元素。同时，采用 classList.toggle 配合CSS来控制元素的显示状态，实现了代码逻辑与样式定义的清晰分离，提升了代码的可维护性和扩展性。

以上就是如何构建一个可点击且支持自定义URL的搜索栏的详细内容，更多请关注php中文网其它相关文章！