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

可以啦。