调用百度搜索,输入自动显示下拉关键字(可获取具体下拉内容)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript" src="http://localhost/zxxxck/mysuggest.js"></script>

   <style type="text/css" media="screen">

    body {

     font: 11px arial;

    }

    .suggest_link {

     background-color: #FFFFFF;

     padding: 2px 6px 2px 6px;

    }

    .suggest_link_over {

     background-color: #E8F2FE;

     padding: 2px 6px 2px 6px;

    }

    #search_suggest {

        position: absolute;

     background-color: #FFFFFF;

     text-align: left;

     border: 1px solid #000000;    

    }  

   </style>

</head>


<body>

   <div style="width: 500px;">

    <form id="frmSearch" action="">

<input type="text" id="txtSearch" name="txtSearch" alt="Search Criteria" onkeyup="searchSuggest();" onkeydown="searchSuggest();" autocomplete="off" />

   <input type="submit" id="cmdSearch" name="cmdSearch" value="Search" alt="Run Search" /><br />

   <div id="search_suggest">

     </div>

    </form>

   </div>

<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<p id="baidu_infor"></p>

</body>

</html>

mysuggest.js

window.baidu=new Array();

function searchSuggest() {

   var head = document.getElementsByTagName("head")[0];  

   var str = encodeURIComponent(document.getElementById('txtSearch').value);

   var url = 'http://suggestion.baidu.com/su?wd='+str+'&t='+Math.round(new Date().getTime()/1000);

   load_script(url,function(){

       window.baidu.sug = function(params){

           var list = params.s;

           var ss = document.getElementById('search_suggest')

           ss.innerHTML = '';

           for(i=0; i < list.length - 1; i++) {

               var suggest = '<div onmouseover="javascript:suggestOver(this);" ';

               suggest += 'onmouseout="javascript:suggestOut(this);" ';

               suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';

               suggest += 'class="suggest_link">' + list[i] + '</div>';

               ss.innerHTML += suggest;

           }

          document.getElementById("baidu_infor").innerHTML = ss.innerHTML;

       };  

   });  

}

function load_script(url, callback){

   var head = document.getElementsByTagName('head')[0];

   var script = document.createElement('script');

   script.type = 'text/javascript';

   script.src = url;

   script.onload = script.onreadystatechange = function(){

       if((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")){

           callback && callback();

           script.onload = script.onreadystatechange = null;

           if ( head && script.parentNode ) {

               head.removeChild( script );

           }

       }

   };

   head.insertBefore( script, head.firstChild );

}


//Mouse over function

function suggestOver(div_value) {

div_value.className = 'suggest_link_over';

}

//Mouse out function

function suggestOut(div_value) {

div_value.className = 'suggest_link';

}

//Click function

function setSearch(value) {

document.getElementById('txtSearch').value = value;

document.getElementById('search_suggest').innerHTML = '';

}