thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解


Posted in PHP onJuly 15, 2019

本文实例讲述了thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果。分享给大家供大家参考,具体如下:

用过百度搜索的人应该都知道这个效果,今天我用ThinkPHP+Mysql+Ajax来实现这样的一个效果,首先我把所有的代码都先给大家,最后再来讲解。

  • 百度即时搜索效果图

thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解

  • 运行效果图

thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解

  • 数据库截图

城市表

thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解

学校表

thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解

  • 控制层代码(SchoolController.class.php)
<?php
namespace Wechat\Controller;
use Think\Controller;
/**
 * 学校模块控制层
 */
class SchoolController extends Controller {
  //学校选择页面
  public function index(){
    $County = D("County");
    $School = D("School");
    //获取所有的省份列表
    $cityList = $County->where("pid = 0")->order("sort desc")->select();
    //遍历省份数据,获取二级城市列表
    foreach ($cityList as $key => $value) {
      $countyList[] = $County->where("pid = ".$value['id'])->order("sort desc")->select();
    }
    //如果url传过来省级编号,就保存,否则就默认山东为要显示的省份
    if(!empty($_GET['cityid'])){
      $cityid = $_GET['cityid'];
    }else{
      //6号代码山东的城市编号
      $cityid = 6;
    }
    //查询此省份编号中的所有城市
    $countyList = $County->where("pid = ".$cityid)->order("sort desc")->select();
    //查询城市中的所有学校
    foreach ($countyList as $key => $value) {
      $countyList[$key]['school'] = $School->where("cid = ".$value['id'])->select();
    }
    //给视图层赋值
    $this->assign("cityList",$cityList);
    $this->assign("countyList",$countyList);
    //显示视图层
    $this->display();
  }
  //根据关键字进行查找
  public function get_school_by_key(){
    $key = $_POST['key'];//获取关键字
    if(empty($key))
      $this->ajaxReturn(array("flag"=>0,"data"=>array())); //如果关键字为空,就返回空数组
    //查询学校
    $School = D("School");
    $where['name'] = array("like","%".$key."%");
    $schoolList = $School->where($where)->limit("6")->select();
    if(empty($schoolList))
      $this->ajaxReturn(array("flag"=>0,"data"=>array()));//如果数据为空,也返回空数组
    $this->ajaxReturn(array("flag"=>1,"data"=>$schoolList));//返回学校列表
  }
}
  • 视图层代码(index.html)
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet"  href="__PUBLIC__/Wechat/css/choose.css?20150819" rel="external nofollow" type="text/css">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" type="text/javascript"></script>
<title>选择所在学校</title>
</head>
<body style="overflow:-Scroll;overflow-x:hidden">
<div class="title"> 请选择您所在学校 </div>
<div class="search-w">
 <input class="search" type="text" name="k"  placeholder="快速搜索您所在的城市或学校" value="">
 <!--需要动态显示的数据列表框-->
 <ul class="list">
 </ul>
</div>
<div class="wraper">
 <div class="center">
  <div class="left">
   <ul>
    <!--显示所有的省份-->
    <foreach name="cityList" item="city">
      <li id="box{$city.id}"><a href="__APP__/School/index/cityid/{$city.id}" rel="external nofollow" >{$city.name}</a></li>
    </foreach>
   </ul>
  </div>
  <div class="right">
   <!--显示所有城市 -->
   <foreach name="countyList" item="county">
    <ul>
    <p>{$county.name}</p>
    <!--显示城市里面的学校-->
    <foreach name="county['school']" item="school">
      <li><a href="__APP__/Dormitory/index/sid/{$school.sid}" rel="external nofollow" >{$school.name}</a></li>
    </foreach>
    </ul>
   </foreach>
  </div>
 </div>
</div>
</body>
<script>
$(function(){
 //响应键盘事件
 $('.search-w input[name="k"]').keyup(function(){
  //发送post请求,地址为控制器中的get_school_by_key方法,参数为输入的内容
  $.post('__APP__/School/get_school_by_key',{'key':$(this).val()},function(data){
      var data = eval('('+data+')');
      //如果数据不为空
      if(data.flag){
       //清空ul中的数据并显示
       $(".list").empty();
       $('.list').css('display','block');
       // 循坏遍历返回值,并添加到li中
       $(data.data).each(function(position){
        $(".list").append("<li><a href='__APP__/Dormitory/index/sid/"+data.data[position].sid+"'>"+data.data[position].name+"</a></li>");
       });
     }else{
      //不显示
      $('.list').css('display','none');
     }
   });
 });
});
</script>
</html>
  • css样式表(choose.css)
/* CSS Document */
* {
  margin:0;
  padding:0;
}
body {
  background:#FBFBFB;
  width:100%;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
}
.right ul li a:active {
  color:#FF5C57;
}
.left ul li a:active {
  color:#FF5C57;
}
.right ul li a:hover {
  color:#FF5C57;
}
.left ul li a:hover {
  color:#FF5C57;
}
.title {
  background:#C32D32;
  height:50px;
  width:100%;
  line-height:50px;
  text-align:center;
  font-family:Arial, Helvetica, sans-serif;
  font-size:18px;
  color:#FFF;
}
.search-w {
  text-align:center;
  width:100%;
  height:50px;
}
.search {
  width:95%;
  height:30px;
  text-align:center;
  margin-top:1%;
  border:#ccc 1px solid;
  font-size:14px;
  background: #FFF url(image/s1.png) no-repeat 15% 5px;
}
.list {
  width:95%;
  text-align:left;
  border:#ccc 1px solid;
  font-size:14px;
  margin:0 auto;
  background:#FFF;
   position:relative;
}
.list li {
  height:35px;
  width:100%;
  line-height:35px;
  border-bottom:#DFDFDF 1px solid;
}
.list li a{color:#939393; width:100%; height:100%; display:block;}
.list li a:hover {
  color:#ff5c57;
}
.wraper{
  width: 100%;
  height:100%;
}
.center{
  width:95%;
  height:100%;
}
.left {
  margin-top:5px;
  width:19.9%;
  background:#FBFBFB;
  float:left;
  border-top:#DFDFDF 1px solid;
  overflow:hidden;
}
.left ul {
  width:100%;
  height:100%;
}
.left ul li {
  height:60px;
  line-height:60px;
  border-bottom:#F1F1F1 1px solid;
  text-align:center;
  border-right:1px solid #C0C0C0;
}
.left ul li a {
  color:#939393;
  font-weight: bold;
  height:100%;
  width:100%;
  display:block;
}
.right {
  margin-top:5px;
  width:80%;
  background:#FFF;
  float:left;
  border-top:#DFDFDF 1px solid;
}
.right ul li a {
  padding-left: 5%;
  color:#939393;
  height:100%;
  width:95%;
  display:block;
}
.right ul {
  width:100%;
  height:100%;
}
.right ul li {
  height:45px;
  line-height:45px;
  width:100%;
  text-align:left;
  border-bottom:#E8E8E8 1px solid;
  color:#7C7C7C;
}
.right ul p{
  height:45px;
  line-height:45px;
  width:100%;
  text-align:center;
  border-bottom:#E8E8E8 1px solid;
  color:#939393;
  font-weight: bold;
  font-size: 18px;
}

至此,所有东西全部公布完毕,我们来分析一下,首先在控制层的index方法中获取所有的省份,城市和学校数据,用于视图层显示。此外在控制层中还有一个方法get_school_by_key,这个方法是根据关键字来查找学校信息,并返回Json数据。在视图层index.html文件中,我们利用Jquery来响应用户输入的事件,然后利用Jquery操作Ajax的方式来从服务器端获取与关键字匹配的学校数据,并用动态添加li的方式来显示到ul中。

希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。

PHP 相关文章推荐
discuz的php防止sql注入函数
Jan 17 PHP
PHP中break及continue两个流程控制指令区别分析
Apr 18 PHP
PHP文章按日期(月日)SQL归档语句
Nov 29 PHP
joomla jce editor 解决上传中文名文件失败问题
Jun 09 PHP
CodeIgniter安全相关设置汇总
Jul 03 PHP
ThinkPHP之用户注册登录留言完整实例
Jul 22 PHP
ThinkPHP中limit()使用方法详解
Apr 19 PHP
PHP邮箱验证示例教程
Jun 01 PHP
php实现博客,论坛图片防盗链的方法
Oct 15 PHP
详解PHP如何更好的利用PHPstorm的自动提示
Aug 18 PHP
PHP并发场景的三种解决方案代码实例
Feb 27 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
Mar 09 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
Jul 12 #PHP
php array_chunk()函数用法与注意事项
Jul 12 #PHP
laravel框架中间件 except 和 only 的用法示例
Jul 12 #PHP
Laravel框架实现多数据库连接操作详解
Jul 12 #PHP
php遍历目录下文件并按修改时间排序操作示例
Jul 12 #PHP
微信推送功能实现方式图文详解
Jul 12 #PHP
PHP FileSystem 文件系统常用api整理总结
Jul 12 #PHP
You might like
PHP 全角转半角实现代码
2010/05/16 PHP
解析PHP中intval()等int转换时的意外异常情况
2013/06/21 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
js日期相关函数总结分享
2013/10/15 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
js实现tab切换效果
2017/02/16 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
vue 实现动态路由的方法
2020/07/06 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
[53:13]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-GAMING
2014/05/22 DOTA
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
python实现自动登录人人网并采集信息的方法
2015/06/28 Python
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
Java如何读取CLOB字段
2013/10/10 面试题
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
工程质量承诺书
2014/03/27 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
商务代表岗位职责
2015/02/15 职场文书
大学生受助感言
2015/08/01 职场文书
MySQL中日期型单行函数代码详解
2021/06/21 MySQL
Element实现动态表格的示例代码
2021/08/02 Javascript