使用ajax實現搜尋功能

標籤：nbsp   url   fun   eui   success   登入   arch   blog   items   

 

　　

      最近要做一個搜尋功能，網上搜了一圈，終於做出來了，這裡分享我的方法,希望對大家有用，不足之處還請指教。

     這裡使用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     }

 

   

使用ajax實現搜尋功能