<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#text{
width:300px;
height:30px;
padding:5px;
border:1px solid #f90;
font-size:16px;
}
#ul1{
width:310px;
padding:0;
margin:0;
border:1px solid #f90;
display:none;
}
li a{
line-height:30px;
padding:5px;
text-decoration:none;
color:black;
display:block;
}
li a:hover{
background:#f90;
color:white;}
</style>
<script>
function may(data)
{
var oul1 = document.getElementById('ul1');
var html = '';
if(data.s.length)
{
oul1.style.display = 'block';
for(var i = 0; i < data.s.length; i++)
{
html += '<li><a target= "_blank" href="http://www.baidu.com/s?wd='+data.s[i]+'">'+data.s[i]+'</a></li>'
}
oul1.innerHTML = html;
}
else
{
oul1.style.display = 'none';
}
}
window.onload = function ()
{
var otext = document.getElementById('text');
var oul1 = document.getElementById('ul1');
otext.onkeyup = function ()
{
if(this.value != '')
{
var oscript = document.createElement('script');
oscript.src = 'http://suggestion.baidu.com/su?wd='+this.value+'&cb=may';
document.body.appendChild(oscript);
}
else
{
oul1.style.display = 'none';
}
}
}
</script>
</head>
<body>
<input id="text" type="text">
<ul id="ul1">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</body>
</html>
