<!DOCTYPE
html
>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>Title </title>
<style>
*{ padding: 0 ; margin: 0 ;}
li{ list-style: none ;}
#container{ position: relative ; width: 800 px ; height: 50 px ; padding: 50 px ; border: 1 px solid #EAA90B ; margin: auto ;}
#search{ width: 450 px ; height: 50 px ; line-height: 50 px ; font-size: 30 px ; box-sizing: border-box ; float: left ;}
button{ width: 200 px ; height: 50 px ; float: left ;}
img{ float: left}
ul{ position: absolute ; top: 100 px ; left: 167 px ; display: none ;}
li{ font-size: 30 px ; line-height: 50 px ; border: 1 px dashed #4FEF10 ; width: 448 px ;}
</style>
</head>
<body>
<div id= "container" >
<img src= "baidu.gif" alt= "" >
<input type= "text" id= "search" >
<button> 百度一下 </button>
<ul id= "lis" >
</ul>
</div>
<script>
search. onkeyup = function(){
var _sc = document. createElement( "script") ;
_sc. src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + search. value + "&cb=Search" ;
document. body. appendChild(_sc) ;
}
search. onblur = function(){
lis. textContent = "" ;
}
function Search(str){
console. log(str) ;
lis. textContent = "" ;
lis. style. display = "block" ;
for( var i = 0 ;i < str.s. length ;i++){
var _li = document. createElement( "li") ;
_li. textContent = str.s[i] ;
lis. appendChild(_li) ;
}
}
</script>
</body>
</html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>Title </title>
<style>
*{ padding: 0 ; margin: 0 ;}
li{ list-style: none ;}
#container{ position: relative ; width: 800 px ; height: 50 px ; padding: 50 px ; border: 1 px solid #EAA90B ; margin: auto ;}
#search{ width: 450 px ; height: 50 px ; line-height: 50 px ; font-size: 30 px ; box-sizing: border-box ; float: left ;}
button{ width: 200 px ; height: 50 px ; float: left ;}
img{ float: left}
ul{ position: absolute ; top: 100 px ; left: 167 px ; display: none ;}
li{ font-size: 30 px ; line-height: 50 px ; border: 1 px dashed #4FEF10 ; width: 448 px ;}
</style>
</head>
<body>
<div id= "container" >
<img src= "baidu.gif" alt= "" >
<input type= "text" id= "search" >
<button> 百度一下 </button>
<ul id= "lis" >
</ul>
</div>
<script>
search. onkeyup = function(){
var _sc = document. createElement( "script") ;
_sc. src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + search. value + "&cb=Search" ;
document. body. appendChild(_sc) ;
}
search. onblur = function(){
lis. textContent = "" ;
}
function Search(str){
console. log(str) ;
lis. textContent = "" ;
lis. style. display = "block" ;
for( var i = 0 ;i < str.s. length ;i++){
var _li = document. createElement( "li") ;
_li. textContent = str.s[i] ;
lis. appendChild(_li) ;
}
}
</script>
</body>
</html>