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

jfa2008

大概是这个by
那么这次还是用jquery做
###明确思路
1.在输入框输入关键词后，实时动态的在ulli里面显示联想词
首先新建html然后导入jquery
导入完后，我们需要一个输入框`input`和一个ulli标签用来存放联想词大概长这样
然后开始写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-CN/docs/Web/JavaScript/Reference/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的解决方案
等，都一一在这个小案例里面展现了。
字数原因，全部代码附上不了，委屈点点开演示站，右键查看源代码直接复制