fakerbaidu

来源：互联网发布：未来造价软件编辑：程序博客网时间：2024/06/06 19:56

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
#box{
width:500px;
margin:80px 80px;
}
#txt{
width:300px;
height:30px;
}
#btn{
width:50px;
height:30px;
}
#ul1{
width:302px;
border:1px solid #000;
display:none;
border-top:none;
}
li:first-child{
border-top:none;
}
li{
list-style:none;
width:302px;
height:30px;
line-height:30px;
/*超出隐藏*/
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
li:hover{
background:#0dd;
}
</style>
</head>
<body>
<div id="box">
<input type="text" name="txt" id="txt" value="" />
<input type="button" name="btn" id="btn" value="搜索" />
<ul id="ul1"></ul>
</div>



<script type="text/javascript">
var oTxt = document.getElementById("txt");
var oUl = document.getElementById("ul1");
var oBtn = document.getElementById("btn");

// document.onclick = function(){
// oUl.style.display = "none";
// }

//加事件
oTxt.onkeyup = oTxt.onfocus = function(){
oUl.style.display = "block";
if(oTxt.value == ""){
oUl.style.display = "none";
}
oUl.innerHTML = "";
var str = oTxt.value;
//动态创建script
var sc = document.createElement("script");
sc.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + str + "&cb=goback";
document.getElementsByTagName("head")[0].appendChild(sc);
}

//准备回调函数
function goback(data){
//console.log(data);
/*
* {q: "a", p: false, s: Array(10)}p: falseq: "a"s: (10) ["爱奇艺", "apple", "阿里云", "安居客", "阿里巴巴批发网", "爱情公寓", "安卓模拟器", "阿里旺旺", "acfun", "adobe"]__proto__: Object
*/
data.s.forEach(function(value){
var oLi = document.createElement("li");
oLi.innerHTML = value;
oUl.appendChild(oLi);
});
if(data.s == ""){
oUl.style.display = "none";
}
var oLis = oUl.getElementsByTagName("li");
//console.log(oLis.length);
for(var i = 0;i < oLis.length;i ++){
oLis[i].onclick = function(){
//console.log(this.innerHTMl);
oTxt.value = this.innerHTML;
oUl.style.display = "none";
//search();
}
}
}

oBtn.onclick = function(){
search();
}
document.onkeydown = function(evt){
var e = evt || window.event;
if(e.keyCode == 13){
search();
}
}
function search(){
var wd = oTxt.value;
//console.log(wd);
window.open("https://www.baidu.com/s?word=" + wd);
}
</script>
</body>
</html>

阅读全文

0 0