<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding:0;
}
ul,ol,li{
list-style: none;
}
input{
500px;
height: 40px;
display: block;
margin: 30px auto 0 ;
padding-left: 20px;
font-size: 30px;
}
ul{
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>
<input type="text">
<ul></ul>
</div>
<script>
/*
百度搜索栏效果
请求地址
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>