首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

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程序设计有所帮助。

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

- Author -

webbc

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
phpMyAdmin 链接表的附加功能尚未激活的问题
Aug 01 PHP
php htmlspecialchars()与shtmlspecialchars()函数的深入分析
Jun 05 PHP
php操作MongoDB基础教程（连接、新增、修改、删除、查询）
Mar 25 PHP
解析PHP强制转换类型及远程管理插件的安全隐患
Jun 30 PHP
PHP开发框架kohana3 自定义路由设置示例
Jul 14 PHP
php实现设计模式中的单例模式详解
Oct 11 PHP
PHP中new static() 和 new self() 的区别介绍
Jan 09 PHP
smarty内置函数config_load用法实例
Jan 22 PHP
PHP 数组基本操作小结(推荐)
Jun 13 PHP
浅谈PHP的数据库接口和技术
Dec 09 PHP
Thinkphp5行为使用方法汇总
Dec 21 PHP
PHP删除数组中指定下标的元素方法
Feb 03 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
Tsmoothie(1) dockerfile(1) reduce(2) TextInputLayout(1) Selenium(1) SQLite3(1) filter(1) 分布式锁(3) 短信验证码(1) Django(9)
You might like
PHP异常处理浅析
2015/05/12 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
php微信开发之关注事件
2018/06/14 PHP
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
js+html制作简单验证码
2017/02/16 Javascript
RequireJs的使用详解
2017/02/19 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
详解用JS添加和删除class类名
2019/03/25 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
学习和使用python的13个理由
2019/07/30 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
PyCharm上安装Package的实现(以pandas为例)
2020/09/18 Python
Python通过len函数返回对象长度
2020/10/22 Python
Python: glob匹配文件的操作
2020/12/11 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
2016/05/09 HTML / CSS
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
Strawberrynet草莓网新加坡站：护肤、彩妆、香水及美发产品
2018/08/31 全球购物
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
学习型家庭事迹材料
2014/12/20 职场文书
大班上学期个人总结
2015/02/13 职场文书
慰问信（范文3篇）
2019/10/23 职场文书