JavaScript简易搜索条项目

最新推荐文章于 2025-01-14 18:00:00 发布

手机用户3381415902

最新推荐文章于 2025-01-14 18:00:00 发布

阅读量108

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/u011082575/article/details/132974747

本文详细指导如何使用JavaScript、HTML和CSS创建一个基础搜索条，包括构建HTML结构、添加事件监听器、处理数据和搜索结果的显示与清除

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原始地址：https://dev.to/am20dipi/how-to-build-a-simple-search-bar-in-javascript-4onf

JavaScript简易搜索条项目

今天，我们将一起学习如何在JavaScript中构建一个功能性但非常简单的搜索条。此项目还将使用CSS和HTML。

思路如下:

创建基本文件
构建HTML文件的基本内容
创建简单的数据
建立事件监听器
在页面上显示结果
清除页面上的结果
显示无结果/无效输入
测试我们的代码

现在我们清楚地了解了需要实现的目标…让我们开始吧！

创建基本文件

请记住：这是一个简单的项目。您可以根据自己的需要添加和修饰。但是对于今天的需求，我们只需要三个文件：

index.js
index.html
style.css

我们有一个JavaScript文件，其中包含我们的事件监听器、函数、变量声明和赋值以及基本数据。

我们有一个HTML文件，其中包含我们的DOM元素，并以可见的格式显示代码到Web页面。

我们还有一个CSS文件，我们将使用它来为HTML元素添加样式和一些装饰。

您可以直接在代码编辑器中创建这些文件（右键单击并选择“新建文件”或使用新建文件按钮）或在终端中创建：

touch index.html
touch index.js
touch style.css

构建HTML的基本内容

我通常使用HTML5的标准模板来开始；它看起来像这样：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search Bar</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <script src="index.js"></script>
  </body>
</html>

在标题标签中，您可以给您的项目命名任何您想要的名称。这在浏览器页面上不一定可见，但作为浏览器标签上的标签标签可见。

<title>Search Bar</title>

最初添加（也就是说立即添加！）的两个重要事项是必要的链接和脚本标签。在开始构建HTML文件时，养成添加style.css文件的链接标签和index.js文件的脚本标签的习惯。

<head>
  <link rel="stylesheet" href="style.css">
</head>

样式表应该放在HTML文件的head标签中。该标签允许您在浏览器上可见地呈现CSS文件中的任何样式。

JavaScript文件的脚本标签应该放在body标签中。通常将其放在底部是常见做法。将HTML文件与任何JS文件连接起来很重要。您的JS文件将引用来自HTML的DOM元素。

<body>
  <script src="index.js"></script>
</body>

现在，我们需要在HTML的body中嵌套一些元素。我们肯定需要：

一个带有输入字段的表单元素
一个“清除”按钮以清除我们的结果
一个无序列表元素来容纳我们的结果

这是一个例子：

<body>
  <div class="form-container">
    <form class="form">
      <input id="search" type="text" class="input" placeholder="search..."/>
      <button id="clear" class="clear-results">clear</button>
    </form>
  </div>
  <div class="results-container">
    <ul class="results-list" id="list">
    </ul>
  </div>
  <script src="index.js"></script>
</body>

对于每个元素，请提供一个“class”名称和/或“id”。确保类名或id名称反映元素正在执行或提供的功能。

从外到内，我创建了一个名为“form-container”的div元素；这是JavaScript中的常规标准。我们希望嵌套具有特定角色的不同部分在它们自己的容器中。因此，我们的表单容器包含表单和相邻的按钮。然后，我们有另一个名为“results-container”的div，这将保存我们的结果。

在我们的表单容器中，我创建了一个表单元素。这个元素保存了我们接下来的表单元素。我创建了一个类型为“text”的input标签，这允许用户在输入框中输入。我还提供了一个类名、id和一个占位符。然后，我创建了一个类型为“submit”的“submit”按钮；这个按钮也有一个类名。按钮标签之间的文本将在浏览器上显示为“search”。清除按钮的想法也是一样的。

我们的浏览器应该看起来像这样：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

所以，我们的HTML文件已经准备好了：接下来我们继续处理JavaScript文件。

创建简单的数据

由于这是一个简单的项目，我们不需要引用API，我们将创建一些简单的数据以作为搜索结果呈现到页面上。进入您的index.js文件。

我喜欢使用JavaScript嵌套数组来创建数据。对于今天的例子，我们的数据将是人名。因此，我们的数组将被称为“people”。

const people = []

每个数组项都将是一个对象，即每个数组项都将具有属性和值。

const people = [
  { name: 'adri' },
  { name: 'becky' },
  { name: 'chris' },
  ...

]

这就是我们的简单数据！随意创建一个食物、颜色、电视节目的数组…任何您想要的东西！

建立事件监听器

我们必须建立两个（2）个事件监听器。事件监听器等待事件发生（“点击”，“按键”，“输入”）然后执行相应的操作。在这种情况下，当输入框中键入输入内容时和点击清除按钮时，都需要执行一些操作。在JavaScript中，事件监听器的语法如下所示：

whateverElement.addEventListener("eventType", () => {
  // do something
})

因此，对于要附加事件监听器的输入表单，我要使用querySelector通过其类名检索按钮，并将其设置为常量（以便以后使用）。

const searchInput = document.querySelector('.input')

现在，我要将事件监听器附加到我们声明和赋值的常量上：

searchInput.addEventListener("input", (e) => {
  // 在里面，我们将需要完成一些事情：
  // 1. 声明和赋值事件的目标值，即搜索栏中键入的任何内容
  let value = e.target.value
  // 2. 检查：如果输入存在且输入长度大于0
  if (value && value.trim().length > 0){
    // 3. 重新定义'value'，去除空格并将输入转换为全小写
    value = value.trim().toLowerCase()
    // 4. 只有当搜索的值包含在人名中时，才返回结果
    // 我们需要编写代码（一个用于筛选数据以包含搜索输入值的函数）
  } else {
    // 5. 返回空
    // 输入无效 -- 显示错误消息或显示无结果
  }
})

让我们为清除按钮创建一个基础：

const clearButton = document.getElementById('clear')
clearButton.addEventListener("click", () => {
  // 1. 编写一个函数，从页面中删除任何先前的结果
})

在页面上显示结果

要显示我们的结果，我们必须最终遍历我们的简单数据，如果任何数据与输入值匹配，则将数据附加到页面上（可见）。

让我们创建一个首先将结果附加到网页的函数。

// 创建并声明名为"setList"的函数
// setList接受一个名为"results"的参数
function setList(results) {
  for (const person of results) {
    // 为每个结果项创建一个li元素
    const resultItem = document.createElement('li')
    // 为结果的每个项目添加一个类
    resultItem.classList.add('result-item')
    // 获取当前循环点的名称并将其添加为列表项的文本
    const text = document.createTextNode(person.name)
    // 将文本附加到结果项
    resultItem.appendChild(text)
    // 将结果项附加到列表
    list.appendChild(resultItem)
  }
}

现在，我们已经编写了如何将结果附加到页面的代码；我们需要集中精力弄清楚应将什么附加到页面。

如果我们回到我们的事件监听器，我们停留在第4步。

我们将调用“setList()”，并传入我们的people数组，但不是整个数组。我们将筛选people数组，并仅使用“people”的名称值的项目。

searchInput.addEventListener("input", (e) => {
  let value = e.target.value
  if (value && value.trim().length > 0){
    value = value.trim().toLowerCase()
    // 仅当搜索的值包含在人名中时，返回setList的结果
    setList(people.filter(person => {
      return person.name.includes(value)
    }))

让我们进行测试，如果我们在搜索栏中键入“be”，则“becky”应该显示在搜索栏下方的页面上。

你看到了什么？

清除页面上的结果

要从页面中删除结果，我们需要调用我们的“list”元素，并删除每个子元素，因为我们的结果项是“list”的子元素。

最简单、最快的方法是删除父元素的第一个子元素，直到没有更多的子元素为止…我们可以使用“while”循环来做到这一点。

While循环：只要条件仍然为真，就执行描述的动作。

function clearList() {
  // 遍历搜索结果列表的每个子元素，并删除每个子元素
  while (list.firstChild) {
    list.removeChild(list.firstChild)
  }
}

我们可以在我们的事件监听器中引用这个函数——

searchInput.addEventListener("input", (e) => {
  // 在里面，我们将需要完成一些事情：
  // 1. 声明和赋值事件的目标值，即搜索栏中键入的任何内容
  let value = e.target.value
  // 2. 检查：如果输入存在且输入长度大于0
  if (value && value.trim().length > 0){
    // 3. 重新定义'value'，去除空格并将输入转换为全小写
    value = value.trim().toLowerCase()
    // 4. 只有当搜索的值包含在人名中时，才返回结果
    // 我们需要编写代码（一个用于筛选数据以包含搜索输入值的函数）
  } else {
    // 5. 返回空
    clearList()
  }
})

clearButton.addEventListener("click", () => {
  clearList()
})

显示无结果

我们需要问自己，如果输入值没有匹配，即没有结果，将会发生什么？我们需要向用户准确地告知这一点！

让我们创建一个名为“noResults()”的函数。该函数将在结果应该显示的位置上呈现一个错误消息。

function noResults() {
  // 为错误创建一个元素；一个列表项（"li"）
  const error = document.createElement('li')
  // 为我们的错误元素添加一个类名"error-message"
  error.classList.add('error-message')
  // 为我们的元素创建文本
  const text = document.createTextNode('No results found. Sorry!')
  // 将文本附加到我们的元素上
  error.appendChild(text)
  // 将错误附加到我们的列表元素上
  list.appendChild(error)
}

我们可以在setList()函数中使用这个函数：

function setList(results){
  clearList()
  for (const person of results){
    const resultItem = document.createElement('li')
    resultItem.classList.add('result-item')
    const text = document.createTextNode(person.name)
    resultItem.appendChild(text)
    list.appendChild(resultItem)
  }
  if (results.length === 0){
    noResults()
  }
}