使用ajax实现搜索功能

Posted 2020-10-12 一轮明月随潮涌

 

　　

      最近要做一个搜索功能，网上搜了一圈，终于做出来了，这里分享我的方法,希望对大家有用，不足之处还请指教。

     这里使用ajax提交数据，配合jquery将数据显示出来。

     用jq的keyup触发搜索功能。

html部分：

<input type="text">

<div class="search_show">

　　　<!--搜索出来的数据显示在这里-->

</div>

js部分：

   //搜索功能,提交ajax数据到后台
    function search(){
        var html =‘‘
        var key =  $("input").val()
        var datas = {‘key‘: key};
        $.ajax({
            url: ‘{:U("Index/ajax_search")}‘,
            data: datas,
            type: ‘POST‘,
            dataType: ‘json‘,
            success: function (data) {
                if(data.code==1){
                    $.each(data.data,function(no,items){
                        var url  = "{:U(‘Index/question‘,array(‘user_id‘=>"+items.id+"))}"
                        //拼接数据
                        html+= ‘<div class="weui-flex"><div class="name_box"><span user_id="‘+items.id+‘" class="wait_dot"></span>‘+items.name+
                                ‘ </div><div class="flex__item_box">‘+items.mobile+
                                ‘</div><div class="flex__item_box">登录次数:‘+ items.count+
                                ‘</div><div class="btn_detail"><a href="‘+url+‘" ‘+‘class="weui-btn weui-btn_mini weui-btn_primary " >详情</a></div> </div>‘
                    });
                    $(‘.search_show‘).html(html)//显示数据
                }
            },
        });
    }
    //搜索功能,手指离开键盘时触发
    $("input").keyup(function(){
        search()
    });

php部分：（基于tp）

 1   /** 模糊查询
 2      * @param: array  $search_data    搜索关键字
 3      */
 4     public function ajax_search()
 5     {
 6         $res[‘code‘] = 0;
 7         $search_data = I(‘post.key‘);
 8         $conn = ‘‘;
 9         if (!empty($search_data)) {
10             $key[‘name‘] = array(‘like‘, ‘%‘ . $search_data . ‘%‘);
11             $conn = M(‘users‘)->field(‘id,name, mobile,count‘)->where($key)->select();
12         }
13         if ($conn) {
14             $res[‘code‘] = 1;
15             $res[‘data‘] = $conn;
16             $res[‘msg‘] = ‘成功‘;
17         } else {
18             $res[‘msg‘] = ‘失败‘;
19         }
20         echo json_encode($res);
21     }