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>