搜索框auto_complete

前段时间亲人故去，让我对人生有产生了怀疑，究竟我们是图个啥？

废话不说了。

auto_complete  是基于网络上面的一个版本进行修改的，因为本人对css样式不熟悉，借鉴别人很多东西。希望原作者莫见怪。

样式表

<style>
#search {
 font-size: 14px;
}

#search .searchFrame {
 padding: 2px 1px;
 width: 320px;
}

#search_auto {
 border: 1px solid #817FB2;
 position: absolute;
 display: none;
}

#search_auto li {
 background: #FFF;
 text-align: left;
}

#search_auto li.cls {
 text-align: right;
}

#search_auto li a {
 display: block;
 padding: 5px 6px;
 cursor: pointer;
 color: #666;
}

#search_auto li a:hover {
 background: #D8D8D8;
 text-decoration: none;
 color: #000;
}
</style>

用ajax和juery实现异步请求并显示

<script src="../js/jquery.js"></script>
  <script>
  $(document).ready(function(){
   $('#search_auto').css({'width':$('#search input[name="searchFrame"]').width()+4});
   $('#search input[name="searchFrame"]').keyup(function(){
  
   var xmlhttp;
   var data;
   if(window.XMLHttpRequest)
   {
    xmlhttp = new XMLHttpRequest();
   }else
   {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlhttp.onreadystatechange = function(){
    if(xmlhttp.readyState == 4&&xmlhttp.status == 200){
    $('#search_auto').css('display','block');
    $('#search_auto').html(xmlhttp.responseText);
     
    }
   }
   xmlhttp.open("GET","${ctxPath}/issue.do?method=${searchContent}&issueSalesId="+$(this).val(),true);
   xmlhttp.send();
   var temp = data;  
   });
   
  });
  function getText(){
   document.getElementById("searchFrame").value=event.srcElement.innerHTML;
   document.getElementById("${inputName}").value=event.srcElement.innerHTML;
   $('#search_auto').css('display','none');
  }

  <!--点击隐藏-->
  $(document).click(function(){
   $('#search_auto').css('display','none');
  });  
  </script>