需求
实现搜索框
实现思路
1.编写好布局 2.实现输入框事件,有数据的话,通过添加script标签 src属性调用数据 3.编写回调函数,对获取的数据进行处理。
代码
<!DOCTYPE html>
<html lang="zh-cn">
<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>百度搜索</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
#div1{
width: 312px; margin: 100px auto;
}
#sea{
width: 300px; height: 30px; padding: 5px; border: 1px solid black; font-size: 16px
}
#ul1{
width: 310px;border: 1px solid black;margin: 0px;display: none;
}
</style>
<script type="text/javascript">
function download(data){
var arr=data.s;
var oUl=document.getElementById("ul1");
//将上次输入的结果清空
oUl.innerHTML='';
//显示无序列表
oUl.style.display="block";
//添加数据
for(var i=0;i<arr.length;i++){
//创建新标签
var newLi=document.createElement("li");
var oa=document.createElement("a");
//添加数据
oa.innerHTML=arr[i];
oa.href='http://www.baidu.com/s?wd=' + arr[i]; //对应的搜索网址
oa.target='_blank'; //在新窗口打开网页
//插入ul中
newLi.appendChild(oa);
oUl.appendChild(newLi);
}
}
</script>
<script type="text/javascript">
window.onload=function(){
var oIn=document.getElementById("sea");
var oUl=document.getElementById("ul1");
oIn.onkeyup=function(){
var ovalue=this.value; //获取输入框的值
//对输入框进行非空判断
if(!ovalue){
//空值不改变状态
oUl.style.display="none";
}else{
//非空加载数据
//创建script
var oscript=document.createElement("script");
//填写src访问路径,设置访问值和调用方法
oscript.src=`http://suggestion.baidu.com/su?wd=${this.value}&cb=download`;
//将script标签插入body
document.body.appendChild(oscript);
}
}
}
</script>
</head>
<body>
<div id="div1" >
<input type="text" id="sea"/>
<ul id="ul1">
</ul>
</div>
</body>
</html>