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

ThinkPHP  /  管理员 发布于 8年前   497

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

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

• 百度即时搜索效果图

• 运行效果图

• 数据库截图

城市表

学校表

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

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）

 请选择您所在学校 
   
 
 
  
   
              
{$city.name}
       
    
          
    
{$county.name}
              
{$school.name}
        
      

• 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相关内容感兴趣的读者可查看本站专题：《ThinkPHP入门教程》、《thinkPHP模板操作技巧总结》、《ThinkPHP常用方法总结》、《codeigniter入门教程》、《CI(CodeIgniter)框架进阶教程》、《Zend FrameWork框架入门教程》及《PHP模板技术总结》。

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

您可能感兴趣的文章:

• ThinkPHP实现ajax仿官网搜索功能实例
• Thinkphp搜索时首页分页和搜索页保持条件分页的方法
• ThinkPHP让分页保持搜索状态的方法
• ThinkPHP使用getlist方法实现数据搜索功能示例
• ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
• php+ajax实时输入自动搜索匹配的方法
• php+ajax做仿百度搜索下拉自动提示框(有实例)
• ajax+php 谷歌搜索框自动填充功能 实例代码
• php+ajax实现仿百度查询下拉内容功能示例