<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
padding: 50px;
}
*{
padding: 0;
margin: 0;
}
input{
width: 300px;
height: 30px;
}
ul{
width: 302px;
border: 1px solid #ddd;
display: none;
}
ul li{
width: 302px;
height: 20px;
list-style: none;
}
ul li a{
color: #000;
text-decoration: none;
}
ul li a:hover{
color: lightseagreen;
}
</style>
</head>
<body>
<input type="text" name="text" id="text" value="" />
<ul>
</ul>
</body>
<script type="text/javascript">
function fn(data){
var oUl=document.querySelector('ul');
var html='';
var arr=data.s;
for (var i=0;i<arr.length;i++) {
/*地址在百度首页输入框f12netwo可查,关键字wd= cb(callb)*/
html+='<li><a target="_blank" href="https://www.baidu.com/s?wd='+arr[i]+'">'+arr[i]+'</a></li>';
}
oUl.innerHTML=html;
}
</script>
<script type="text/javascript">
var oUl=document.querySelector('ul');
var oHtml=document.getElementsByTagName('html')[0];
var oText=document.getElementById('text');
oText.onkeyup=function(){
if (this.value!='') {
var oS=document.createElement('script');
oS.src='http://suggestion.baidu.com/su?wd='+this.value+'&cb=fn';
oHtml.appendChild(oS);
oUl.style.display='block';
}
}
</script>
</html>
跨域加载:搜索输入关键字实时更新
最新推荐文章于 2024-08-18 00:09:16 发布