jQuery+PHP+Mysql实现输入自动完成提示的功能

这里的案例：用户输入帐号，及时检查用户是否正确！

<style type="text/css">
  .suggestions_box {
 position: relative;
 width: 230px;
 z-index: 998;
}
.suggestion_list {
 background: none repeat scroll 0 0 white;
 border: 1px solid #B8CFDB;
 position: absolute;
 width: 230px;
 z-index: 999;
 height: expression( this.scrollHeight > 200 ? "200px" : "auto" );
 max-height: 200px;
 overflow-y: auto;
}
.suggestion_list li{
 padding: 3px;
 cursor: default;
 list-style-type :none;
}
.suggestion_list li:hover {
 background-color: #EEEEEE;
}
</style>
<table>
        <tr>
          <td>
              Test
          </td>
          <td>
            <input type="text" name="input_data" id="input_data" value="" autocomplete="off" οnkeyup="show_list('search_data');"  οnblur="hide_sugg()" />
            <div class="suggestions_box" id="suggestions" style="display: none;">
                <div class="suggestion_list" id="auto_suggestions_list"></div>
            </div>
          </td>
        </tr>
      </table>

//这里到网上下载一个jquery.js
<script type="text/javascript" src="./jquery.js"></script>
 <script type="text/javascript">
function show_list(url) {
//url:这里是你要提交的到哪个函数里面处理的地址

  var input_data = $("#input_data").val();
 
  if(input_data == "" || input_data == null){
    return null;
  } else {
          //post方式，  ，取得数据后返回
          $.post(url, {input_data: $("#input_data").val()}, function (msg) {
 
                                var msg = eval("("+msg+")");//转换格式
 
                              if (msg.length > 0) {
                                  $('#suggestions').show();
                                  $("#auto_suggestions_list").html("");
                                   for (i = 0; i < msg.length; i++) {
                                    var span_dom = $('<li onClick="fill('+"\'"+msg[i].truename+"\'"+')"/>').text("真实姓名："+msg[i].truename);
                                     $('#auto_suggestions_list').append(span_dom);
                                    
                                  } 


                              } else {
                                $("#auto_suggestions_list").html("");
                                $('#suggestions').hide();
                              }


 
                        });




 
  }
}
 


</script>

php:对应提交的地址，这里是采用tp写的

<?php
 
 public function search_data(){


       
      $input_data = $_POST['input_data'];
      $user=M('user')->where(array('account'=>$input_data))->find();
      $data[] = array(
            'account' => $input_data,
            'truename' =>   $user['truename']
          );
      echo json_encode($data);
  }


 ?>