百度搜索栏效果 - Tsunami黄嵩粟

百度搜索栏效果

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding:0;

}

ul,ol,li{

list-style: none;

}

input{

width: 500px;

height: 40px;

display: block;

margin: 30px auto 0 ;

padding-left: 20px;

font-size: 30px;

}

ul{

width: 500px;

border: 1px solid #000;

padding-left:20px;

margin: 0 auto;

display: none;

}

li{

height: 30px;

line-height: 30px;

}

li:hover{

color: skyblue ;

}

</style>

</head>

<body>

<div>

</div>

百度搜索栏效果

请求地址

https://www.baidu.com/sugrec

请求时传递的参数

?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=32292,1423,32361,31253,32046,32160,32116,26350,31639,22159&wd=12&req=2&csor=2&cb=jQuery110206062535504069535_1595836803036&_=1595836803038

请求的关键词

wd=1;

回调函数的函数名称

cb=jQuery110206062535504069535_1595836803036

发起请求的时间戳

_=1595836803038

// 获取需要的请求结果

// 获取标签对象

const oIpt = document.querySelector('input');

const oUl = document.querySelector('ul');

// 给input添加事件,输入数据时,发起请求

oIpt.addEventListener( 'input' , ()=>{

// 1,获取关键词,也就是input中输入的内容

let key = oIpt.value;

// 2,获取时间戳

const time = new Date();

let t = parseInt( time.getTime() / 1000 ) ;

// 3,动态生成 src,跨域 jsonp请求

// 每次请求,关键词,时间戳等都不同,需要动态生成对应的 jsonp请求

// 3-1,定义生成 script标签使用节点方式生成

let s = document.createElement('script');

// 3-2,给script标签,定义一个name属性,属性值是 jsonp

// 为了区分原始script标签, 也就是其他执行 js 程序的 script

// 表示这个是专门做跨域请求的 script 标签

// 主要是为了区别跨域请求的script标签和其他的script标签

s.setAttribute('name' , 'jsonp');

// 设定 script标签的url地址

// url地址中,修改参数

// 1, wd 搜索的关键词

// 2, cb 执行的函数名称

// 3, _ 定义的时间戳,方式浏览器缓存

// 如果浏览器执行缓存(认为两次请求是相同请求),就会使用上一次请求的结果,不会再发送新的请求

s.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=32292,1423,32361,31253,32046,32160,32116,26350,31639,22159&wd=${key}&req=2&csor=2&cb=setSearch&_=${t}`;

// 将定义好的script标签,写入到页面中应该在 body 的最下方

// 导入script标签的同时,就会执行跨域的jsonp请求,生成页面内容

document.body.appendChild(s);

// 写入结束,就可以删除这个script标签了

document.body.removeChild(s);

})

// 执行程序,获取结果,要对数据结果进行操作

// 操作一定是通过一个函数来操作

// 需要定义一个函数,来执行操作数据

// 为了确保说个 script 标签都能正常执行

// 将函数定义在 window 上

// 从百度搜索栏获取的数据,通过 setSearch 函数来执行操作

window.setSearch = function (res){

// 对象中的每一组数据,对应生成一个li标签

// 标签的内容,就是 res.g[索引下标].q 中的文字内容

// res 中存储的是百度的后台返回给我们的内容

// 我们只能看,只能用,不能改

console.log(res);

// console.log(res.g[0].q);

// res响应体内容,有可能是没有查询结果的

// 如果res有查询内容,执行字符串拼接,写入到ul中

// 如果res没有查询结果内容,不显示ul标签

// res.g 不存在获取结果是 undefined 自动转化为布尔值是 false

if(res.g){

// 有查询结果,将查询结果拼接为li字符串,写入到ul中

let str = '';

// 循环拼接生成li标签,内容是文字内容

res.g.forEach(item=>{

str += `<li>${item.q}</li>`;

});

// 写入ul标签中

oUl.innerHTML = str;

// 显示ul标签

oUl.style.display = 'block';

}else{

// 没有查询结果,不显示ul

oUl.style.display = 'none';

}

// 失去鼠标焦点,让ul隐藏不显示

oIpt.addEventListener('change' , ()=>{

oUl.style.display = 'none';

})

</script>

</body>

</html>

posted on 2020-12-09 17:54 Tsunami黄嵩粟阅读(156) 评论(0) 编辑收藏举报