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

系列文章目录

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

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

---

目录

系列文章目录

前言

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

1.记录当前值

2.获取搜索建议

二、关键问题

总结

---

前言

作为一个起始页，最重要的地功能那就是搜索，一个完整搜索功能就包括以下几个小点：输入关键词智能推荐搜索建议、键盘选择回车搜索、历史记录以及搜索引擎切换，其中最难的点就是输入关键词反馈搜索建议，这也是今天分享讲解的内容。

---

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

        当我们在使用百度等搜索引擎时，在输入框输入任意字符，它就会在搜索框下方生成搜索建议，那么这其实是随着你输入，网页根据你输入的当前值向服务器动态的请求建议形成的结果。也就是说这其实就是一个记录当前输入值再不断地发送请求地过程。

1.记录当前值

        要想时时地记录当前输入框地值，我们就需要利用到受控组件，我们这里利用react当中的函数组件+hook的形式来实现受控组件，具体代码如下：

function SearchNav(){
    const [searchInputValue, setSearchInputValue] = useState('')    //hook初始值为''

    function searchInputValueChange (e) {