您的位置:首页 > Web前端 > JQuery

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

2017-08-10 17:29 1146 查看
这里的案例:用户输入帐号,及时检查用户是否正确!

<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" onkeyup="show_list('search_data');"  onblur="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);

  }

 ?>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: