React打造一个纯前端插件（二）：关键词输入提示与优化

系列文章结构概述

【React】从零搭建一个纯前端起始页浏览器插件（一）：介绍

【React】从零搭建一个纯前端起始页浏览器插件（二）：搜索框关键词推荐（搜索建议）

---

目录结构与内容概览

系列文章结构概览

引言

一、搜索建议的生成机制是怎样的？

1.保存当前数值

2.提取搜索建议内容

二、核心问题分析

结论

---

前言

作为系统首页的核心功能，搜索功能占据着至关重要的地位。一个完善的搜索模块应当涵盖多个关键要素，具体包括：输入关键词时的智能推荐提示、通过键盘选择并按回车键进行搜索、历史记录功能以及搜索引擎之间的切换选项。在这些组成部分中，最具挑战性的部分当属输入关键词后实时反馈搜索建议的功能，这也是本次分享的重点内容。

一、搜索建议是如何生成的？

在利用百度等搜索引擎进行信息检索时，用户只需在输入框中输入任意字符，系统便会实时生成相应的搜索建议，并将其显示在搜索框下方。这一现象实际上是网页根据用户当前输入的内容，持续向服务器发起动态请求所形成的结果。换句话说，这整个过程本质上是不断记录用户的输入内容，并随之发送请求的连续操作。

1.记录当前值

为了持续记录当前输入框中的内容，必须采用受控组件的方式。在此过程