最近要做一个搜索功能,网上搜了一圈,终于做出来了,这里分享我的方法,希望对大家有用,不足之处还请指教。
这里使用ajax提交数据,配合jquery将数据显示出来。
用jq的keyup触发搜索功能。
html部分:
<input type="text">
<div class="search_show">
<!--搜索出来的数据显示在这里-->
</div>
js部分:
??//搜索功能,提交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){ ???????????????????????var url ?= "{:U(‘Index/question‘,array(‘user_id‘=>"+items.id+"))}"
???????????????????????//拼接数据 ???????????????????????html+= ‘<div class="weui-flex"><div class="name_box"><span user_id="‘+items.id+‘" class="wait_dot"></span>‘+items.name+ ???????????????????????????????‘ </div><div class="flex__item_box">‘+items.mobile+ ???????????????????????????????‘</div><div class="flex__item_box">登录次数:‘+ items.count+ ???????????????????????????????‘</div><div class="btn_detail"><a href="‘+url+‘" ‘+‘class="weui-btn weui-btn_mini weui-btn_primary " >详情</a></div> </div>‘ ???????????????????}); ???????????????????$(‘.search_show‘).html(html)//显示数据 ???????????????} ???????????}, ???????}); ???} ???//搜索功能,手指离开键盘时触发 ???$("input").keyup(function(){ ???????search() ???});
php部分:(基于tp)
1 ??/** 模糊查询 2 ?????* @param: array ?$search_data ???搜索关键字 3 ?????*/ 4 ????public function ajax_search() 5 ????{ 6 ????????$res[‘code‘] = 0; 7 ????????$search_data = I(‘post.key‘); 8 ????????$conn = ‘‘; 9 ????????if (!empty($search_data)) {10 ????????????$key[‘name‘] = array(‘like‘, ‘%‘ . $search_data . ‘%‘);11 ????????????$conn = M(‘users‘)->field(‘id,name, mobile,count‘)->where($key)->select();12 ????????}13 ????????if ($conn) {14 ????????????$res[‘code‘] = 1;15 ????????????$res[‘data‘] = $conn;16 ????????????$res[‘msg‘] = ‘成功‘;17 ????????} else {18 ????????????$res[‘msg‘] = ‘失败‘;19 ????????}20 ????????echo json_encode($res);21 ????}
使用ajax实现搜索功能
原文地址:http://www.cnblogs.com/chaoyong/p/7763947.html