HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#q{
300px;
height: 30px;
padding: 5px;
border: 1px solid #f90;
font-size: 16px;
}
#ul1{
border: 1px solid #f90;
310px;
margin: 0;
padding: 0;
display: none;
}
li a{
line-height: 30px;
padding: 5px;
text-decoration: none;
color: black;
display: block;
}
li a:hover{
background: #f90;
color: #fff;
}
</style>
</head>
<body>
<input type="text" name="" id="q" value="" />
<ul id="ul1">
<!--<li>
<a href="javascript:;">文字1</a>
</li>
<li>
<a href="javascript:;">文字2</a>
</li>
<li>
<a href="javascript:;">文字3</a>
</li>
<li>
<a href="javascript:;">文字4</a>
</li>-->
</ul>
<script type="text/javascript">
var oQ=document.getElementById('q');
var oUl=document.getElementById('ul1');
oQ.onkeyup=function(){
if(this.value !=''){
var oScript = document.createElement('script');
oScript.src = 'http://suggestion.baidu.com/su?wd='+this.value+'&cb=fn';
document.body.appendChild(oScript);
}else{
oUl.style.display = 'none';
}
}
function fn(data){
var html = '';
if(data.s.length){
oUl.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>';
}
oUl.innerHTML = html;
}else{
oUl.style.display = 'none';
}
}
</script>
</body>
</html>