构建一个简单的搜索功能

简介

在这个项目中，你将学习如何使用 JavaScript 实现一个简单的搜索功能。你将学习如何将输入事件绑定到输入框、处理搜索数据以及显示搜索结果。

👀 预览

🎯 任务

在这个项目中，你将学习：

• 如何将 input 事件绑定到输入框
• 如何实现 handleInput 方法来过滤搜索数据
• 如何在列表中渲染搜索结果

🏆 成果

完成这个项目后，你将能够：

• 使用 addEventListener 方法绑定事件
• 使用 filter 方法根据条件过滤数组
• 操作 DOM 以更新搜索结果

Skills Graph

设置项目结构

在这一步中，你将设置项目文件和结构。按照以下步骤完成此步骤：

打开项目文件夹。目录结构如下：

├── css
│   └── style.css
├── index.html
└── js
    └── index.js

其中：

• index.html 是主页。
• css 是用于存储项目样式的文件夹。
• js/index.js 是你需要添加代码的 JavaScript 文件。

点击 WebIDE 右下角的 Go Live 按钮来运行项目。

接下来，在虚拟机顶部打开 “Web 8080” 并手动刷新，你将看到页面。

渲染搜索结果

在这一步中，你将实现 render 方法来显示搜索结果。

1. 在 js/index.js 文件中，找到 search 对象中的 render 方法。
2. 在 render 方法内部，添加以下代码以生成搜索结果的 HTML 模板并更新 listEl 元素：

const template = this.data.reduce(
  (prev, next) => prev + `<li>${next.content}</li>`,
  ""
);
this.listEl.innerHTML = template;

reduce 方法用于创建一个 HTML 模板字符串，该字符串显示 data 数组中每个项目的 content 属性。

实现 handleInput 方法

在这一步中，你将实现 handleInput 方法来处理搜索功能。

1. 在 js/index.js 文件中，找到 search 对象中的 handleInput 方法。
2. 在 handleInput 方法内部，添加以下代码以根据输入值过滤 data 数组，然后渲染搜索结果：

const value = e.target.value;
// 使用定时器模拟 ajax 发送请求、接收数据
setTimeout(() => {
  this.data = !!value
    ? data.filter((val) => val.content.indexOf(value) !== -1)
    : [];
  this.render();
});

setTimeout 函数用于模拟异步操作，比如 AJAX 请求，以接收搜索数据。

绑定输入事件

在这一步中，你将学习如何将 input 事件绑定到输入框，并在输入框的值发生变化时调用 handleInput 方法。

1. 打开 js/index.js 文件。
2. 在 search 对象中找到 handle 函数。
3. 在 handle 函数内部，添加以下代码将 input 事件绑定到 inputEl 元素，并调用 handleInput 方法：

this.inputEl.addEventListener("input", this.handleInput.bind(this));

bind(this) 部分很重要，它确保 handleInput 方法内部的 this 指向 search 对象本身。

完成这四个步骤后，js/index.js 文件现在应该具有搜索功能的完整实现，并且项目应该按预期工作。最终效果应如下所示：

总结

恭喜你！你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。