首页
所有分类
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 相关文章推荐
随机广告显示(PHP函数)
Oct 09 PHP
php 获取远程网页内容的函数
Sep 08 PHP
基于empty函数的判断详解
Jun 17 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
Jan 15 PHP
实现PHP+Mysql无限分类的方法汇总
Mar 02 PHP
了解PHP的返回引用和局部静态变量
Jun 04 PHP
7个鲜为人知却非常实用的PHP函数
Jul 01 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
Apr 26 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
Dec 02 PHP
解析PHP之提取多维数组指定列的方法
Jan 03 PHP
php简单随机字符串生成方法示例
Apr 19 PHP
Django中的cookie与session操作实例代码
Aug 17 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
共享文件夹(1) caddy(1) NginxConfig(1) 横向滚动(1) localStorage(1) Postman(1) 骨架屏(1) SVN(1) virtualenv(1) 加载异常(1)
You might like
PHP 高手之路（三）
2006/10/09 PHP
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
php curl_init函数用法
2014/01/31 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
PHP使用PDO访问oracle数据库的步骤详解
2017/09/29 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
Laravel5.3+框架定义API路径取消CSRF保护方法详解
2020/04/06 PHP
js调用flash的效果代码
2008/04/26 Javascript
js arguments.callee的应用代码
2009/05/07 Javascript
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
理解AngularJs指令
2015/12/10 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
微信小程序实现星级评价
2019/11/20 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
Vue切换div显示隐藏,多选，单选代码解析
2020/07/14 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
内容编辑个人求职信
2013/12/10 职场文书
校运会广播稿100字
2014/01/27 职场文书
办公室员工岗位工作职责
2014/03/10 职场文书
地理教师岗位职责
2014/03/16 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
Nginx配置之禁止指定IP访问
2022/05/02 Servers