<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Title</title>
<meta name= "Author" content= "Fly" >
<style type= ' text/css ' >
*{margin:0; padding:0; font-family:microsoft Yahei,serif;}
#box {width:300px;margin:100px Auto;}
#search {width:298px;height:38px;border:1px solid #ccc; Font-size:14px;text-indent:5px;color: #222;}
#list {width:298px;border:1px solid #ccc; border-top:none;display:none;}
#list Li{height:25px;line-height:25px;text-indent:10px;font-size:14px;list-style:none;cursor:pointer;overflow: hidden;width:100%;}
#list Li A{display:block;width:100%;height:100%;color: #555; text-decoration:none;}
#list li.hover{}
</style>
<body>
<div id= "box" >
<input type= "text" id= "search" ><ul id= "list" ><!--<li>111</li>--><!--<li> 222</li>--><!--<li>333</li>--><!--<li>444</li>--><!--<li >555</li>--></ul>
</div>
<script>
var oinp = document.getElementById (' search ');
var olist = document.getElementById (' list ');
var index =-1, startval = ';
Oinp.onkeyup = function (e) {
var val = this.value;
if (val) {
e = e | | window.event;
var keycode = E.keycode;
if (keycode = = = | | keycode = =) {
var aLi = Olist.children;
var length = ali.length;
if (keycode===38) {
index--;
if (index<-1) index = ali.length-1;
}else{
index + +;
if (index>length-1) index =-1;
}
For (Var j=0;j<length;j++) {
ali[j].classname = ";
}
if (index!==-1) {
this.value = Ali[index].children[0].innertext;
ali[index].classname = ' hover ';
}else{
Console.log (startval);
this.value = startval;
}
return false;
}else if (keycode = = =) {
window.open (' https://www.baidu.com/s?wd= ' +val, ' _blank ');
This.blur ();
}else{
startval = val;
Addscript.call (this,val);
}
}else{
olist.innerhtml = ";
}
};
Oinp.onblur = function () {
setTimeout (function () {
oList.style.display = ' none ';
},200);
};
Oinp.onfocus = function () {
oList.style.display = ' block ';
if (this.value) Addscript.call (this,this.value);
};
function Addscript (val) {
var OS = document.createelement (' script ');
os.src = ' https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd= ' + val + ' &cb=fly&_= ' +new Dat E (). GetTime ();
Document.body.appendChild (OS);
os.onload = function () {
Document.body.removeChild (this);
};
}
function Fly (Mjson) {
var s = mjson.s;
var length = Math.min (s.length, 5);
olist.innerhtml = ";
For (Var i=0;i<length;i++) {
var oLi = document.createelement (' li ');
oli.innerhtml = ' <a href= ' https://www.baidu.com/s?wd= ' + s[i] + ' "target=" _blank "> ' +s[i]+ ' & Lt;/a> ';
oli.onmouseenter = function () {
For (Var j=0;j<length;j++) {
this.parentnode.children[j].classname = ";
}
this.classname = ' hover ';
};
oli.onmouseleave = function () {
this.classname = ";
};
Olist.appendchild (oLi);
}
}
</script>
</body>
JSONP cross-domain instance 丨 using Baidu data making search page