这里使用ajax提交数据,配合jquery将数据显示出来。
用jq的keyup触发搜索功能。
1. html部分:
~~~
~~~
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+= '
'});
$('.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);
}
~~~