使用ajax实现搜索功能

时间：2023-03-08 22:28:17

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

这里使用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);
} 

欢迎留言讨论

相关文章