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

   欢迎留言讨论