今天做一个百度搜索框的关键词联想案例 适合收藏

聪明小米

大概是这个by
那么这次还是用jquery做
### 明确思路
1.在输入框输入关键词后，实时动态的在ul li里面显示联想词
首先新建html 然后导入jquery
导入完后，我们需要一个输入框 `input` 和一个ul li标签 用来存放联想词 大概长这样
然后开始写JavaScript 先获取亓素
由于我们需要实时得到输入框里面输入改变后的内容，那么就需要绑定个.on
那么如何得到实时变化后，输入框里面的数据呢？
我不知道，所以我百度了。
然后我找到了这个
`oninput` 这个 可以简写 `input` 我们试试
ok 下一步，找到百度搜索的api 可以自己抓，我这边附上一个：
`https://www.baidu.com/sugrec?ie=utf-8&json=1&prod=pc&wd=`
使用方法到挺简单，这边就不讲其他参数 就讲一个 &wd= 后面接上关键词 就能得到结果
由于我们是想实时得到数据，那么事件就写到
这个作用域里。
类型选择GET就行 URL 输入
`https://www.baidu.com/sugrec?ie=utf-8&json=1&prod=pc&wd=`
发送参数就是输入框的值
接收数据类型选择json
那我们开始做
差不多了，我们测试一下。
输入了text得到了运行了五次，但是我输入的是四个字节，这是个小bug，然后看一下得到的数据，发现是空
然后点击 网络 去看看啥情况
数据是发出去了，但是发送的地方多了个&=
原来是在发送参数过去的地方出现了错误。那我们来解决一下
曲线救国，我们用字符串拼接的方式把 输入框的值 拼接上去，然后看看结果
得到了，但是好像还不太干净，我们只需要 `g` 里面的数组，所以我们简单改改
数据到没问题。然后我们来把它打印到页面上
这里要用到for循环 因为这是个数组。
我们先把 `response.g` 存到变量 `list`中
然后开始for循环。
我怕我讲的不标准，所以我在MDN里面截图了
链接：https://developer.mozilla.org/zh ... ence/Statements/for
先从第三行开始看
for 是循环语句里面用 `let` 新建了个作用域变量 i 是一个计数器
就是计算循环了几次，然后后面有个` i < 9` 也就是说 循环的次数小于9次
如果是` i <= 9`的话 那就是小于9等于9次
然后有个`i++` 作用是循环一次后 i就从 0 + 一次 循环到9次 就不动了
然后就是 第一行 用 `let` 新建了个作用域变量 `src ` 也就是循环体。
通俗的讲，就是你要把他循环几次，更直观的演示 我这边做个小demo
这个 `console.log('Nice');` 就是我要循环打印的东西 如果不出意外 是打印10次，我们看看
这么看，就更直观。然后回到正题，
我们已经有了循环体，那就开始打印一下这个循环体
要打印多少次，我们不知道，取决于`list` 有多少出组数据，所以我们打印的次数取决于对象数组的长度，所以就用 ` list.length`来表示
然后打印了10个同样的list数组，但是我们要的是list里面的数据，但是我们又不知道对象数组里面又有多少个数据
所以我们用 `list` 表示，也就是对象数组list里面的第i个数据，因为 i 小于或等于上面我们定义的 list.length 也就是对象数组长度。然后打印一下。
没问题，但是数据不干净，我们处理一下 我们只要list里面的第i个对象数组里面的q
没问题了，接下来，只需要把他打印到 ul里面去了
用let新建个作用域变量` lis`
把 `list.q`的数据存进去
然后获取 ul 亓素，因为我们需要把最后的 lis渲染到html页面上去 通过`append`追加上去,还得通过拼接字符串的方式加上去
做对了，但是有小bug，
它会一直无限叠加且不会删除，那么怎么办，简单分析先来看一下结构
当输入框发生改变，就会执行ajax 然后得到成功后就循环渲染到页面上，那就简单了，直接最上面放一个 `empty()` 意思是 在执行`ajax`前，先清除`ul `里面所有的子亓素 也就是`li `试试看
这样，每一次渲染前，都先清除一下上一次渲染过的，页面上出现的永远都是最/新的数据 就行了，这就完了？暂时还不算，又发现了一个小bug
当你把输入框的内容 按键盘的删除键，一个一个删除的时候，删除干净后 就会报错，我英语不好，所以翻译翻译
问题出在
因为我们定义的事件是 input上发生任何改变，就会触发ajax 然后ajax里面会根据返回值的长度 `length` 去循环，所以说如果 输入框为空，那么久得不到数据
返回值就是undefined 所以才报错， 怎么解决呢 简单加个if判断，如果input 的内容为空，就不执行ajax请求就行了
不报错了，还得加上` $('ul').empty();//清除页面数据`
不然会渲染最后一次数据上去，ok结束
基本的思路
for循环的用法
出现小bug的解决方案
等，都一一在这个小案例里面展现了。
字数原因，全部代码附上不了，委屈点 点开演示站，右键查看源代码直接复制
演示站：
https://www.4z1.cn/dp/nice_baidu.html

超级小爱

最怕的是 sugrec 那个接口，它压根不算对外的公开服务，百度哪天加个 referer 白名单或者限个流，课里跑得通，换到自己項目上就一片 403。还有 oninput 一触发就发请求，不套防抖的话，手快的人敲完一句话能攒出十几条，看着热闹其实全白费。不过作者那句我不知道所以我百度了，我挺买账，比硬撑着装懂强太多。这帖子当个练手素材还行，真要往线上搬，兜底那几层得自己补。