当前位置：首页 > CMS教程 > Thinkphp > 列表

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

发布:smiling　来源: PHP粉丝网 　添加日期：2021-12-04 20:28:11　浏览: 评论：0　

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

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

百度即时搜索效果图

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

运行效果图

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

数据库截图

城市表

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

学校表

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

控制层代码(SchoolController.class.php)

  1. <?php 
  2. namespace Wechat\Controller; 
  3. use Think\Controller; 
  4. /** 
  5.  * 学校模块控制层 
  6.  */ 
  7. class SchoolController extends Controller { 
  8.   //学校选择页面 
  9.   public function index(){ 
  10.     $County = D("County"); 
  11.     $School = D("School"); 
  12.     //获取所有的省份列表 
  13.     $cityList = $County->where("pid = 0")->order("sort desc")->select(); 
  14.     //遍历省份数据，获取二级城市列表 
  15.     foreach ($cityList as $key => $value) { 
  16.       $countyList[] = $County->where("pid = ".$value['id'])->order("sort desc")->select(); 
  17.     } 
  18.     //如果url传过来省级编号，就保存，否则就默认山东为要显示的省份 
  19.     if(!emptyempty($_GET['cityid'])){ 
  20.       $cityid = $_GET['cityid']; 
  21.     }else{ 
  22.       //6号代码山东的城市编号 
  23.       $cityid = 6; 
  24.     } 
  25.     //查询此省份编号中的所有城市 
  26.     $countyList = $County->where("pid = ".$cityid)->order("sort desc")->select(); 
  27.     //查询城市中的所有学校 
  28.     foreach ($countyList as $key => $value) { 
  29.       $countyList[$key]['school'] = $School->where("cid = ".$value['id'])->select(); 
  30.     } 
  31.     //给视图层赋值 
  32.     $this->assign("cityList",$cityList); 
  33.     $this->assign("countyList",$countyList); 
  34.     //显示视图层 
  35.     $this->display(); 
  36.   } 
  37.   //根据关键字进行查找 
  38.   public function get_school_by_key(){ 
  39.     $key = $_POST['key'];//获取关键字 
  40.     if(emptyempty($key)) 
  41.       $this->ajaxReturn(array("flag"=>0,"data"=>array())); //如果关键字为空，就返回空数组 
  42.     //查询学校 
  43.     $School = D("School"); 
  44.     $where['name'] = array("like","%".$key."%"); 
  45.     $schoolList = $School->where($where)->limit("6")->select(); 
  46.     if(emptyempty($schoolList)) 
  47.       $this->ajaxReturn(array("flag"=>0,"data"=>array()));//如果数据为空，也返回空数组 
  48.     $this->ajaxReturn(array("flag"=>1,"data"=>$schoolList));//返回学校列表 
  49.   } 
  50. } 

视图层代码（index.html）

  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  6. <link rel="stylesheet"  href="__PUBLIC__/Wechat/css/choose.css?20150819" rel="external nofollow" type="text/css"> 
  7. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" type="text/javascript"></script> 
  8. <title>选择所在学校</title> 
  9. </head> 
  10. <body style="overflow:-Scroll;overflow-x:hidden"> 
  11. <div class="title"> 请选择您所在学校 </div> 
  12. <div class="search-w"> 
  13.  <input class="search" type="text" name="k"  placeholder="快速搜索您所在的城市或学校" value=""> 
  14.  <!--需要动态显示的数据列表框--> 
  15.  <ul class="list"> 
  16.  </ul> 
  17. </div> 
  18. <div class="wraper"> 
  19.  <div class="center"> 
  20.   <div class="left"> 
  21.    <ul> 
  22.     <!--显示所有的省份--> 
  23.     <foreach name="cityList" item="city"> 
  24.       <li id="box{$city.id}"><a href="__APP__/School/index/cityid/{$city.id}" rel="external nofollow" >{$city.name}</a></li> 
  25.     </foreach> 
  26.    </ul> 
  27.   </div> 
  28.   <div class="right"> 
  29.    <!--显示所有城市 --> 
  30.    <foreach name="countyList" item="county"> 
  31.     <ul> 
  32.     <p>{$county.name}</p> 
  33.     <!--显示城市里面的学校--> 
  34.     <foreach name="county['school']" item="school"> 
  35.       <li><a href="__APP__/Dormitory/index/sid/{$school.sid}" rel="external nofollow" >{$school.name}</a></li> 
  36.     </foreach> 
  37.     </ul> 
  38.    </foreach> 
  39.   </div> 
  40.  </div> 
  41. </div> 
  42. </body> 
  43. <script> 
  44. $(function(){ 
  45.  //响应键盘事件 
  46.  $('.search-w input[name="k"]').keyup(function(){ 
  47.   //发送post请求，地址为控制器中的get_school_by_key方法,参数为输入的内容 
  48.   $.post('__APP__/School/get_school_by_key',{'key':$(this).val()},function(data){ 
  49.       var data = eval('('+data+')'); 
  50.       //如果数据不为空 
  51.       if(data.flag){ 
  52.        //清空ul中的数据并显示 
  53.        $(".list").empty(); 
  54.        $('.list').css('display','block'); 
  55.        // 循坏遍历返回值,并添加到li中 
  56.        $(data.data).each(function(position){ 
  57.         $(".list").append("<li><a href='__APP__/Dormitory/index/sid/"+data.data[position].sid+"'>"+data.data[position].name+"</a></li>"); 
  58.        }); 
  59.      }else{ 
  60.       //不显示 
  61.       $('.list').css('display','none'); 
  62.      } 
  63.    }); 
  64.  }); 
  65. }); 
  66. </script> 
  67. </html> 

css样式表（choose.css）

  1. /* CSS Document */ 
  2. * { 
  3.   margin:0; 
  4.   padding:0; 
  5. } 
  6. body { 
  7.   background:#FBFBFB; 
  8.   width:100%; 
  9. } 
  10. ul { 
  11.   list-style:none; 
  12. } 
  13. a { 
  14.   text-decoration:none; 
  15. } 
  16. .right ul li a:active { 
  17.   color:#FF5C57; 
  18. } 
  19. .left ul li a:active { 
  20.   color:#FF5C57; 
  21. } 
  22. .right ul li a:hover { 
  23.   color:#FF5C57; 
  24. } 
  25. .left ul li a:hover { 
  26.   color:#FF5C57; 
  27. } 
  28. .title { 
  29.   background:#C32D32; 
  30.   height:50px; 
  31.   width:100%; 
  32.   line-height:50px; 
  33.   text-align:center; 
  34.   font-family:Arial, Helvetica, sans-serif; 
  35.   font-size:18px; 
  36.   color:#FFF; 
  37. } 
  38. .search-w { 
  39.   text-align:center; 
  40.   width:100%; 
  41.   height:50px; 
  42. } 
  43. .search { 
  44.   width:95%; 
  45.   height:30px; 
  46.   text-align:center; 
  47.   margin-top:1%; 
  48.   border:#ccc 1px solid; 
  49.   font-size:14px; 
  50.   background: #FFF url(image/s1.png) no-repeat 15% 5px; 
  51. } 
  52. .list { 
  53.   width:95%; 
  54.   text-align:left; 
  55.   border:#ccc 1px solid; 
  56.   font-size:14px; 
  57.   margin:0 auto; 
  58.   background:#FFF; 
  59.    position:relative; 
  60. } 
  61. .list li { 
  62.   height:35px; 
  63.   width:100%; 
  64.   line-height:35px; 
  65.   border-bottom:#DFDFDF 1px solid; 
  66. } 
  67. .list li a{color:#939393; width:100%; height:100%; display:block;} 
  68. .list li a:hover { 
  69.   color:#ff5c57; 
  70. } 
  71. .wraper{ 
  72.   width: 100%; 
  73.   height:100%; 
  74. } 
  75. .center{ 
  76.   width:95%; 
  77.   height:100%; 
  78. } 
  79. .left { 
  80.   margin-top:5px; 
  81.   width:19.9%; 
  82.   background:#FBFBFB; 
  83.   float:left; 
  84.   border-top:#DFDFDF 1px solid; 
  85.   overflow:hidden; 
  86. } 
  87. .left ul { 
  88.   width:100%; 
  89.   height:100%; 
  90. } 
  91. .left ul li { 
  92.   height:60px; 
  93.   line-height:60px; 
  94.   border-bottom:#F1F1F1 1px solid; 
  95.   text-align:center; 
  96.   border-right:1px solid #C0C0C0; 
  97. } 
  98. .left ul li a { 
  99.   color:#939393; 
  100.   font-weight: bold; 
  101.   height:100%; 
  102.   width:100%; 
  103.   display:block; 
  104. } 
  105. .right { 
  106.   margin-top:5px; 
  107.   width:80%; 
  108.   background:#FFF; 
  109.   float:left; 
  110.   border-top:#DFDFDF 1px solid; 
  111. } 
  112. .right ul li a { 
  113.   padding-left: 5%; 
  114.   color:#939393; 
  115.   height:100%; 
  116.   width:95%; 
  117.   display:block; 
  118. } 
  119. .right ul { 
  120.   width:100%; 
  121.   height:100%; 
  122. } 
  123. .right ul li { 
  124.   height:45px; 
  125.   line-height:45px; 
  126.   width:100%; 
  127.   text-align:left; 
  128.   border-bottom:#E8E8E8 1px solid; 
  129.   color:#7C7C7C; 
  130. } 
  131. .right ul p{ 
  132.   height:45px; 
  133.   line-height:45px; 
  134.   width:100%; 
  135.   text-align:center; 
  136.   border-bottom:#E8E8E8 1px solid; 
  137.   color:#939393; 
  138.   font-weight: bold; 
  139.   font-size: 18px; 
  140. } 

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

Tags: thinkPHP+mysql+ajax

分享到：

推荐文章

热门文章

最新评论文章