jquery ajax實現錄入自動匹配資料程式

樣式

代碼如下	複製代碼
<style type="text/css">  .listbox{   position:relative;   left:10px;   margin:10px;   width:200px;   background-color:#000;   color:#fff;   border:2px solid #000;  }  .namelist  {   margin:0px;   padding:0px;   list-style:none;  }  .hover  {   background-color:cyan;   color:blue;  } </style>

頁面代碼部分

代碼如下	複製代碼
<form>  <span class="label">Enter user id</span> <input type="text" name="userid" id ="userid" class="userid"/> <div class="listbox"> <div class="nameslist">   </div> </div> </form>

jQuery代碼部分

代碼如下

複製代碼

<script type="text/javascript"> $(document).ready(function(){  $('.listbox').hide();  $('.userid').keyup(function(){   $.ajax({    type:"POST",    url:"autocomplete.php",    data:    {     userid:$("#userid").val()    },    success:function(html)     {      $(".listbox").show();      $(".nameslist").html(html);      $("li").hover(       function(){        $(this).addClass('hover');},       function(){        $(this).removeClass('hover');       }      );      $('li').click(function(){       $('.userid').val($(this).text());       $('.listbox').hide();      });     }   });  }); }); </script>