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

废话不说了。

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>