使用ajax实现搜索功能
2024-10-01 11:06:31
最近要做一个搜索功能,网上搜了一圈,终于做出来了,很简单的一个,这里分享我的方法,希望对大家有用,不足之处还请指教。
这里使用ajax提交数据,配合jquery将数据显示出来。
用jq的keyup触发搜索功能。
1、html部分:
<input type="text">
<div class="search_show">
<!--搜索出来的数据显示在这里-->
</div>
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+= '<div ><div class="name_box">名字:'+items.name+
' </div><div class="phone">电话:'+items.mobile+
'</div><div class="detail"><a href="'+url+'">' +
'详情</a></div> </div>'
});
$('.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);
}
欢迎留言讨论
最新文章
- 搭建自己的LAMP
- 关于u盘启动,关于UEFI,关于hp手提计算机
- JS加密库Crypto-JS SEA加密
- ie无法下载 无法打开该internet站点.请求的站点不可用或无法找到.请稍后重试
- Protostuff序列化
- Educational Codeforces Round 1 B. Queries on a String 暴力
- 压缩代码加速ecshop程序页面加载速度
- Python之路:Python 基础(三)-文件操作
- CodeForces 625A Guest From the Past
- [转]Maven如何手动添加jar包到本地Maven仓库
- IncDec Sequence(差分)
- day16-(listener&;filter)
- 支持多文件上传,预览,拖拽,基于bootstrap的上传插件fileinput 的ajax异步上传(转载)
- 35 【kubernetes】configMap
- TerraGate SFS Manager配置时权限设置问题
- Ubuntu 16.04 下部署Node.js+MySQL微信小程序商城
- kettle spoon中“表输入”到“表输出”的乱码问题
- win7 C环境搭建
- Fiddler的钩子hook导致电脑无法连上网络
- CentOS使用
热门文章
- vim牛逼的code工具: ctags+ cscope
- C++基础 (7) 第七天 多态的原理 纯虚函数和抽象类 依赖倒置原则
- Linux学习二:基于CentOS 6.5的网络配置
- Python GitHub上星星数量最多的项目
- js/jquery 判断支持touchstart
- (OpenExplorer For Eclipse)Eclipse 中打开工程目录的插件(转)
- CAD-强电常用符号集
- 【转】C# ArcgisEngine开发中,对一个图层进行过滤,只显示符合条件的要素
- spring的关于数据源的datasource接口的深入理解
- HDU 4357