thinkPHP+mysql+ajax如何实现的仿百度一下即时搜索效果
创始人
2024-12-06 18:02:27
0次

具体如下:

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

  • 百度即时搜索效果图

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

  • 运行效果图

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

  • 数据库截图

城市表

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同时也是遵循Apache2协议,最初是从Struts演变过来,也把国外一些好的框架模式进行利用,使用面向对象的开发结构,兼容了很多标签库等模式,它能够更方便和快捷的开发和部署应用,当然不仅仅是企业级应用,任何php应用开发都可以从thinkphp的简单、兼容和快速的特性中受益。

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...