使用ajax實現搜索功能

 

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

這里使用ajax提交數據，配合jquery將數據顯示出來。

用jq的keyup觸發搜索功能。

 

1、html部分：

<input type="text">
<div class="search_show">
    <!--搜索出來的數據顯示在這里-->
</div> 

2、js部分：

//搜索功能,手指離開鍵盤時觸發
$("input").keyup(function(){
    search()
});
//搜索功能,提交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){
                    //這一步是顯示數據的關鍵，each方法可以遍歷二維數組數據
                    //data.data：php返回的數據；
                    //no：鍵值；
                    //items:內層數組內容
                    var url = "{:U('Index/question')}?user_id="+items.id+"
                    //拼接數據
                    html+= '<div ><div class="name_box">名字：'+items.name+
                        ' </div><div class="phone">電話：'+items.mobile+
                        '</div><div class="detail"><a href="'+url+'">' +
                        '詳情</a></div> </div>'
                });
                $('.search_show').html(html)//顯示數據，同時覆蓋上一次搜索的數據
            }
        },
    });
}

3、php（基於thinkphp）

/** 模糊查詢

 * @param: array  $search_data    搜索關鍵字
 */
public function ajax_search()
{
    $res['code'] = 0;
    $search_data = I('post.key');
    $conn = '';
    if (!empty($search_data)) {
        $key['name'] = array('like', '%' . $search_data . '%');
        $conn = M('users')->field('id,name, mobile,count')->where($key)->select();//查詢數據
    }
    if ($conn) {
        $res['code'] = 1;
        $res['data'] = $conn;
        $res['msg'] = '成功';
    } else {
        $res['msg'] = '失敗';
    }
    echo json_encode($res);
} 

   歡迎留言討論