搜索用ajax实现,使用ajax实现搜索功能

这里使用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+= '

'+items.name+

'

'+items.mobile+

'

登录次数:'+ items.count+

'

' +

'详情

'

});

$('.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);

}

~~~