js 类似百度、google搜索 jsp版本

jsp页面

<div id='form' >

    <img src="${images}/../logo001.jpg" width="175px" height="55px"></img>
    <input id="keyword" value="${keyword}" type='text' style="width:30%" οnkeydοwn="if(event.keyCode==13)search();" οnkeyup="inputSuggest('home');"></input>
    <input type="button" οnclick="search()" value="${app:i18n('kbslucene.search_file')}"/>&nbsp;&nbsp;&nbsp;
    <a style="text-decoration:underline;font-size:8pt" href="javascript:showSearchPanel();"><font color="blue">${app:i18n('kbslucene.search_setting')}</font></a>
    &nbsp;&nbsp;<a style="text-decoration:underline;font-size:8pt" href="javascript:DisablePage();"><font color="blue">${app:i18n('kbslucene.feeback')}</font></a>
</div>

<div id="result_display" class="form"> </div>

css样式

<style>
.lockDiv 
{ 
    position:absolute; 
    left:0; 
    top:0; 
    height:0; 
    width:0; 
    border:2 solid red; 
    display:none; 
    text-align:center; 
    background-color:#DBDBDB; 
    filter:Alpha(opacity=60);
    
} 
    .onmouset_over { 
       background-color: #99CCFF;
       padding: 2px 6px 2px 6px;
     } 
    .onmouset_out {
       background-color: #FFFFFF;
       padding: 2px 6px 2px 6px;
    }
     .form   { 
        FONT-SIZE:   11pt;
        font-style: 黑体;
        font-weight: bold; 
        COLOR:   #000000; 
        BACKGROUND-REPEAT:repeat;
        BACKGROUND-ATTACHMENT:   scroll;
        width:30%;position: absolute;overflow:hidden;
        z-index: 1000;
    }
</style>

js代码

  var xmlHttp; 
  var pageFlag;
   //创建XMLHttpRequest对象
   function createXmlHttp() {
      //根据window.XMLHttpRequest对象是否存在使用不同的创建方式
     if (window.XMLHttpRequest) {
        //FireFox、Opera等浏览器支持的创建方式
        xmlHttp = new XMLHttpRequest(); 
     } else {
        //IE浏览器支持的创建方式
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
     }
   }
   function inputSuggest(flag) {
          pageFlag=flag;
       var txtValue = document.getElementById('keyword').value;
       createXmlHttp();
       xmlHttp.onreadystatechange = _handle;
       url = "../kbssuggest/findSuggestByValue.action?txtValue=" + encodeURI(txtValue);
         xmlHttp.open("POST", encodeURI(url), false);
         xmlHttp.send(null);
   }
   function _handle() {
       var left=document.getElementById('keyword').offsetLeft;
       var top =document.getElementById('keyword').offsetTop+document.getElementById('keyword').offsetHeight;
    var s = document.getElementById('result_display')
   if(xmlHttp.readyState==4){
   if(xmlHttp.status==200){
       eval('var resultObj='+xmlHttp.responseText);
       var str = "";
       if(resultObj.suggestReslut!="")
    str = resultObj.suggestReslut.split("#");
                s.innerHTML = '<iframe  style="position:absolute;z-index:-1;width:100%;height:100%;background-color:green;top:0;left:0;scrolling:no;" frameborder="0" src="about:blank" mce_src="about:blank"></iframe>';
                for(i=0; i < str.length - 1; i++) {
                   var suggest = '<div οnmοuseοver="onmouseOver(this);" ';
                   suggest += 'οnmοuseοut="onmousetOut(this);" ';
                   suggest += 'οnclick="setSuggestValue(this.innerHTML);" ';
                   suggest += 'class="onmouset_out">' + str[i] + '</div>';
                   s.innerHTML += suggest;
                }
   }
  
   
   }
    //alert(document.getElementById('keyword').offsetTop+"--"+document.getElementById('keyword').offsetHeight);
       if(pageFlag=="file"){
           s.style.left=left;
           s.style.top=top;
       }
       if(pageFlag=="home"){
           s.style.left=left+9;
           s.style.top=top+15;
       }
   }
      function onmouseOver(div) {
         div.className = 'onmouset_over';
      }
      function onmousetOut(div) {
         div.className = 'onmouset_out';
      }
      function setSuggestValue(value) {
         document.getElementById('keyword').value = value;
         document.getElementById('result_display').innerHTML = '';
      }