首页
所有分类
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 随机生成10位字符代码
Mar 26 PHP
php的list()的一步操作给一组变量进行赋值的使用
May 18 PHP
PHP队列用法实例
Nov 05 PHP
PHP的Yii框架的基本使用示例
Aug 21 PHP
PHP中如何防止外部恶意提交调用ajax接口
Apr 11 PHP
PHP入门教程之PHP操作MySQL的方法分析
Sep 11 PHP
Laravel手动分页实现方法详解
Oct 09 PHP
php利用imagemagick实现复古老照片效果实例
Feb 16 PHP
PHP中for循环与foreach的区别
Mar 06 PHP
Yii框架创建cronjob定时任务的方法分析
May 23 PHP
PHP实现随机数字、字母的验证码功能
Aug 01 PHP
详解PHP中curl_multi并发的实现
Jun 08 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
LINUX面试题(83) MySQL面试题(19) PYTHON面试题(27) Oracle面试题(81) 软件工程师面试题(40) UNIX面试题(27) Javascript面试题(44) 软件测试工程师面试题(53) EJB面试题(46) Servlet面试题(20)
You might like
《雄兵连》《烈阳天道》真的来了
2020/07/13 国漫
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
jQuery中andSelf()方法用法实例
2015/01/08 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
2017/10/20 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
详解Python开发中如何使用Hook技巧
2017/11/01 Python
python之mock模块基本使用方法详解
2019/06/27 Python
浅谈Pandas Series 和 Numpy array中的相同点
2019/06/28 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
Python绘图实现显示中文
2019/12/04 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
Python tkinter和exe打包的方法
2020/02/05 Python
Python实现AI换脸功能
2020/04/10 Python
python爬虫容易学吗
2020/06/02 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
HTML块级标签汇总（小篇）
2016/07/13 HTML / CSS
亚洲在线旅行门户网站：Expedia.com.hk（智游网）
2020/04/14 全球购物
中学生班主任评语
2014/01/30 职场文书
经典而简洁的婚礼主持词
2014/03/13 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
三峡大坝导游词
2015/01/31 职场文书
幸福来敲门观后感
2015/06/04 职场文书
廉洁自律证明
2015/06/24 职场文书