分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

使用ajax实现搜索功能

发布时间:2023-09-06 01:21责任编辑:顾先生关键词:暂无标签
 

  

      最近要做一个搜索功能,网上搜了一圈,终于做出来了,这里分享我的方法,希望对大家有用,不足之处还请指教。

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved