<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #text{ 300px; height:30px; padding:5px; border:1px solid #f90; font-size:16px; } #ul1{ 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>