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

教程
71 0

大概是这个by

image.png

那么这次还是用jquery做

明确思路

1.在输入框输入关键词后,实时动态的在ul li里面显示联想词

首先新建html 然后导入jquery

image.png

导入完后,我们需要一个输入框 input 和一个ul li标签 用来存放联想词 大概长这样

image.png

然后开始写JavaScript 先获取元素

image.png

由于我们需要实时得到输入框里面输入改变后的内容,那么就需要绑定个.on

image.png

那么如何得到实时变化后,输入框里面的数据呢?

我不知道,所以我百度了。

image.png

然后我找到了这个

image.png

oninput 这个 可以简写 input 我们试试

image.png

image.png

ok 下一步,找到百度搜索的api 可以自己抓,我这边附上一个:

https://www.baidu.com/sugrec?ie=utf-8&json=1&prod=pc&wd=

使用方法到挺简单,这边就不讲其他参数 就讲一个 &wd= 后面接上关键词 就能得到结果

由于我们是想实时得到数据,那么事件就写到

image.png

这个作用域里。

image.png

类型选择GET就行 URL 输入

https://www.baidu.com/sugrec?ie=utf-8&json=1&prod=pc&wd=

发送参数就是输入框的值

接收数据类型选择json

那我们开始做

image.png

差不多了,我们测试一下。

image.png

输入了text得到了运行了五次,但是我输入的是四个字节,这是个小bug,然后看一下得到的数据,发现是空

然后点击 网络 去看看啥情况

image.png

数据是发出去了,但是发送的地方多了个&=

原来是在发送参数过去的地方出现了错误。那我们来解决一下

曲线救国,我们用字符串拼接的方式把 输入框的值 拼接上去,然后看看结果

image.png

image.png

得到了,但是好像还不太干净,我们只需要 g 里面的数组,所以我们简单改改

image.png

image.png

数据到没问题。然后我们来把它打印到页面上

这里要用到for循环 因为这是个数组。

我们先把 response.g 存到变量 list

image.png

然后开始for循环。

我怕我讲的不标准,所以我在MDN里面截图了

image.png

链接: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

image.png

这个 console.log('Nice'); 就是我要循环打印的东西 如果不出意外 是打印10次,我们看看

image.png

这么看,就更直观。然后回到正题,

我们已经有了循环体,那就开始打印一下这个循环体

要打印多少次,我们不知道,取决于list 有多少出组数据,所以我们打印的次数取决于对象数组的长度,所以就用 list.length来表示

image.png

image.png

然后打印了10个同样的list数组,但是我们要的是list里面的数据,但是我们又不知道对象数组里面又有多少个数据

所以我们用 list[i] 表示,也就是对象数组list里面的第i个数据,因为 i 小于或等于上面我们定义的 list.length 也就是对象数组长度。然后打印一下。

image.png

image.png

没问题,但是数据不干净,我们处理一下 我们只要list里面的第i个对象数组里面的q

image.png

image.png

没问题了,接下来,只需要把他打印到 ul里面去了

用let新建个作用域变量 lis

list[i].q的数据存进去

然后获取 ul 元素,因为我们需要把最后的 lis渲染到html页面上去 通过append追加上去,还得通过拼接字符串的方式加上去

image.png

image.png

做对了,但是有小bug,

image.png

它会一直无限叠加且不会删除,那么怎么办,简单分析先来看一下结构

image.png

当输入框发生改变,就会执行ajax 然后得到成功后就循环渲染到页面上,那就简单了,直接最上面放一个 empty() 意思是 在执行ajax前,先清除ul 里面所有的子元素 也就是li 试试看

image.png

image.png

这样,每一次渲染前,都先清除一下上一次渲染过的,页面上出现的永远都是最新的数据 就行了,这就完了?暂时还不算,又发现了一个小bug

当你把输入框的内容 按键盘的删除键,一个一个删除的时候,删除干净后 就会报错,我英语不好,所以翻译翻译

image.png

image.png

问题出在

image.png

因为我们定义的事件是 input上发生任何改变,就会触发ajax 然后ajax里面会根据返回值的长度 length 去循环,所以说如果 输入框为空,那么久得不到数据

image.png

image.png

返回值就是undefined 所以才报错, 怎么解决呢 简单加个if判断,如果input 的内容为空,就不执行ajax请求就行了

image.png

image.png

不报错了,还得加上 $('ul').empty();//清除页面数据

image.png

不然会渲染最后一次数据上去,ok结束

基本的思路

for循环的用法

出现小bug的解决方案

等,都一一在这个小案例里面展现了。

附上全部代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

</head>

<body>
    //输入框<input type="text">
    <ul>
        <li>存放联想词</li>
    </ul>
    <script>
        //JavaScript
        $('input').on('input', function () {
            //https://www.baidu.com/sugrec?ie=utf-8&json=1&prod=pc&wd=

            //如果 input 输入框的内容为空
            if ($('input').val() === '') {
                console.log('内容为空,不执行');
                $('ul').empty();//清除页面数据
                return // 终止
            } else {
                // 如果不为空 就执行
                console.log('清除数据');
                $('ul').empty();
                $.ajax({
                    type: "GET", //类型
                    url: "https://www.baidu.com/sugrec?ie=utf-8&json=1&prod=pc&wd=" + $('input').val() +
                        "", //api
                    dataType: "json", //接收数据类型
                    success: function (response) {
                        // 成功响应后的回调
                        var list = response.g;
                        for (let i = 0; i < list.length; i++) {
                            let lis = list[i].q;
                            $('ul').append("<li>" + lis + "</li>");

                        }

                    }
                });
            }


        });
    </script>
</body>

</html>
最后更新 2021-11-30
评论 ( 0 )
OωO
隐私评论