thinkphp实现实时展示搜索查询结果

如上图所示，我们要做的是，搜索结果的同时把得到的结果实时的展示到界面上就是下面的下拉框中

做发非常简单，首先是获取上面搜索的三个条件

如果条件为空则表示这个项目不做限制

获得条件后通过ajax发送查询请求：

function getGoods(){
        var category_id = $("select[name=category_id]").val();
        var brand_id = $("select[name=brand_id]").val();
        var goods_name = $("input[name=goods_name]").val();
        var options = '';
        $.ajax({
            type:"POST",
            url:"{:url('GroupBuy/ajaxGetGoods')}",
            data:{category_id:category_id, brand_id:brand_id, goods_name:goods_name},
            dataType:"json",
            success:function(data){
               
            }
        });
    }

Copy

然后在服务端接受ajax发送的参数，根据参数进行数据的查询：

//异步获取商品信息，用于商品搜索
    public function ajaxGetGoods(){
        $data = input('post.');
        $map = [];
        //商品所属分类判断
        if($data['category_id']){
            $map['category_id'] = array('=', $data['category_id']);
        }else{
            $map['category_id'] = array('neq', 0);
        }
        //商品所属品牌
        if($data['brand_id']){
            $map['brand_id'] = array('=', $data['brand_id']);
        }else{
            $map['brand_id'] = array('neq', 0);
        }
        //商品名称
        if($data['goods_name']){
            $map['goods_name'] = array('like', '%'.$data['goods_name'].'%');
        }else{
            $map['goods_name'] = array('neq', '');
        }
        $goodsRes = db('goods')->field('id, goods_name')->where($map)->select();

        echo json_encode($goodsRes);
    }

Copy

如上代码所示，将得到的数据通过json_encode反馈给客户端

我们就可以把得到的数据实时展示出来啦！

js代码如下，修改上面的success函数：

success:function(data){
                $(data).each(function(k,v){
                    options+="<option value='"+v.id+"'>"+v.goods_name+"</option>";
                });
                $("#goods_id").html(options);
            }

Copy

可以啦。