HTML样式
<body>
<div>
<input type="text">
<ul></ul>
</div>
</body>CSS样式
<style>
* {
margin: 0;
padding: 0;
}
div {
margin: 50px auto;
width: 500px;
}
input {
width: 500px;
height: 40px;
outline: none;
border: 2px solid skyblue;
border-radius: 10px;
padding-left: 20px;
font-size: 25px;
}
ul {
width: 520px;
border: 2px solid skyblue;
border-radius: 10px;
font-size: 18px;
display: none;
}
ul,
li {
list-style: none;
}
</style>JS相关代码
<script>
const oIpt = document.querySelector('input');
const oUl = document.querySelector('ul');
// 2, 给 input 标签,添加输入事件 input事件
oIpt.addEventListener('input', () => {
// 设定一个定时器,延迟触发执行
setTimeout(() => {
// 2-1, 获取时间戳
const time = new Date();
let t = parseInt(time.getTime() / 1000);
// 2-2, 获取输入的数据
let keyWord = oIpt.value;
// 3, 执行 jsonp 跨域请求
// 应该是 定义一个script,和src属性
// 使用节点操作,动态生成标签
const s = document.createElement('script');
// 给s标签定义src属性
s.src =
`https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=7513,32606,1423,32327,31253,32673,32116,26350,22159&wd=${keyWord}&req=2&csor=1&cb=setSearch&_=${t}`;
// 最终script标签要写入到 body 标签的最后
const oBody = document.body;
oBody.appendChild(s);
// 删除 写入的 script 标签
oBody.removeChild(s);
}, 1500);
})
// 3, 失去焦点,让ul隐藏
oIpt.addEventListener('change', () => {
oUl.style.display = 'none';
})
// 定义一个函数,根据返回值结果,生成页面内容
function setSearch(res) {
if (res.g === undefined) {
// 证明是没有搜索结果
// 隐藏ul
oUl.style.display = 'none';
} else {
console.log(res);
// 有查询结果
const arr = res.g;
// 2, 根据arr中的对象的q属性, 生成li, 写入ul
let str = '';
arr.forEach(item => {
str += `<li>${item.q}</li>`;
})
// 将生成的li写入ul
oUl.innerHTML = str;
// 让ul显示
oUl.style.display = 'block';
}
}
</script>-- 展开阅读全文 --
测试[呵呵]