1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>无标题文档</title> 
  6. <script type="text/javascript" src="mysuggest.js"></script> 
  7.     <style type="text/css" media="screen"> 
  8.      body { 
  9.       font: 11px arial; 
  10.      } 
  11.      .suggest_link { 
  12.       background-color: #FFFFFF; 
  13.       padding: 2px 6px 2px 6px; 
  14.      } 
  15.      .suggest_link_over { 
  16.       background-color: #E8F2FE; 
  17.       padding: 2px 6px 2px 6px; 
  18.      } 
  19.      #search_suggest { 
  20.          position: absolute; 
  21.       background-color: #FFFFFF; 
  22.       text-align: left; 
  23.       border: 1px solid #000000;    
  24.      }   
  25.     </style> 
  26. </head> 
  27.  
  28. <body> 
  29.     <div style="width: 500px;"> 
  30.      <form id="frmSearch" action=""> 
  31. <input type="text" id="txtSearch" name="txtSearch" alt="Search Criteria" onkeyup="searchSuggest();" onkeydown="searchSuggest();" autocomplete="off" /> 
  32.     <input type="submit" id="cmdSearch" name="cmdSearch" value="Search" alt="Run Search" /><br /> 
  33.     <div id="search_suggest"> 
  34.       </div> 
  35.      </form> 
  36.     </div> 
  37. </body> 
  38. </html> 
 
  
mysuggest.js
 
  
 
  
  1. window.baidu=new Array(); 
  2. function searchSuggest() { 
  3.     var head = document.getElementsByTagName("head")[0];  
  4.     var str = encodeURIComponent(document.getElementById('txtSearch').value); 
  5.     var url = 'http://suggestion.baidu.com/su?wd='+str+'&t='+Math.round(new Date().getTime()/1000); 
  6.     load_script(url,function(){ 
  7.         window.baidu.sug = function(params){ 
  8.             var list = params.s; 
  9.             var ss = document.getElementById('search_suggest') 
  10.             ss.innerHTML = ''; 
  11.             for(i=0; i < list.length - 1; i++) { 
  12.                 var suggest = '<div οnmοuseοver="javascript:suggestOver(this);" '; 
  13.                 suggest += 'οnmοuseοut="javascript:suggestOut(this);" '; 
  14.                 suggest += 'οnclick="javascript:setSearch(this.innerHTML);" '; 
  15.                 suggest += 'class="suggest_link">' + list[i] + '</div>'; 
  16.                 ss.innerHTML += suggest; 
  17.             } 
  18.         };   
  19.     });  
  20. } 
  21. function load_script(url, callback){ 
  22.     var head = document.getElementsByTagName('head')[0]; 
  23.     var script = document.createElement('script'); 
  24.     script.type = 'text/javascript'; 
  25.     script.src = url; 
  26.     script.onload = script.onreadystatechange = function(){ 
  27.         if((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")){ 
  28.             callback && callback(); 
  29.             script.onload = script.onreadystatechange = null; 
  30.             if ( head && script.parentNode ) { 
  31.                 head.removeChild( script ); 
  32.             } 
  33.         } 
  34.     }; 
  35.     head.insertBefore( script, head.firstChild ); 
  36. } 
  37.  
  38. //Mouse over function 
  39. function suggestOver(div_value) { 
  40. div_value.className = 'suggest_link_over'; 
  41. } 
  42. //Mouse out function 
  43. function suggestOut(div_value) { 
  44. div_value.className = 'suggest_link'; 
  45. } 
  46. //Click function 
  47. function setSearch(value) { 
  48. document.getElementById('txtSearch').value = value; 
  49. document.getElementById('search_suggest').innerHTML = ''; 
  50. }