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

2024-09-28 18:02:17

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

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

ThinkPHP让分页保持搜索状态的方法

对很多使用ThinkPHP框架的人来说,使用自动自带的增删改查基类,在分页的时候要保持结果页面的搜索状态,但是使用thinkphp手册中的方案却无法奏效. ThinkPHP手册中的解决方法是: //分页跳转的时候保证查询条件 foreach($map as $key=>$val) { $Page->parameter .= "$key=".urlencode($val).&; } 直接粘贴过来不能用,经过调试会发现,当$map不是一个数组的时候,那么变量是拿不到想要
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)

网站在移动端的阅读不可避免的会遇到转码问题,作为国内搜索引擎老大百度,自然要做技术的领头人了,做了百度转码,有些网站经过转码之后达到了想要的结果,但是有些网站经过百度加工后就是不忍直视,很多内容出现了错乱,Joe的网站也出现了一些错位,于是Joe用了Wordpress插件MobilePress,经过一些汉化修改,感觉比百度的转码更适合自己. 方法1.HTTP Response中显式声明,Cache-control:no-transform. 在config.php 文件中加入 'HTTP_CAC
ajax+php 谷歌搜索框自动填充功能实例代码

复制代码代码如下: <html> <head> <script language="javascript"><!-- var http_request; function update(v){ if (window.XMLHttpRequest) { // Mozilla, Safari, ... http_request = new XMLHttpRequest(); } else if (window.ActiveXObject) { /
php+ajax实现仿百度查询下拉内容功能示例

本文实例讲述了php+ajax实现仿百度查询下拉内容功能.分享给大家供大家参考,具体如下: 运行效果如下: html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/jquer
php+ajax做仿百度搜索下拉自动提示框(有实例)

php+mysql+ajax实现百度搜索下拉提示框主要有3个文件三个文件在同一个目录里如下图下面是三个文件的代码把sql文件导入到mysql数据库里修改下数据库密码为自己的记得哦是UTF-8编码 php+mysql+ajax实现百度搜索下拉提示框效果图 rpc.php文件复制代码代码如下: <?php mysql_connect('localhost', 'root' ,''); mysql_select_db("test"); $queryString = $
ThinkPHP实现ajax仿官网搜索功能实例

本文实例讲述了ThinkPHP实现ajax仿官网搜索功能的方法.分享给大家供大家参考. 具体实现方法如下: 后台代码: 复制代码代码如下: //搜索,如果在1不在0 function search(){ $keyword = $_POST['search']; $Goods=M('goods'); //这里我做的一个模糊查询到名字或者对应的id,主要目的因为我这个系统是 //商城系统里面用到直接看产品ID $map['goods_id|goods_n
Thinkphp搜索时首页分页和搜索页保持条件分页的方法

本文实例讲述了Thinkphp实现搜索时首页分页和搜索页保持条件分页的方法.分享给大家供大家参考.具体实现方法如下: 在做搜索查询时突然发现在首页用的分页代码在搜索页使用时出现错误,首页分页代码(代码中标注start与end部分为分页代码) 复制代码代码如下: public function index(){ $res=D('Info');// 实例化Data数据对象 /**********start************/ import('ORG.Util.Page');// 导入
php+ajax实时输入自动搜索匹配的方法

本文实例讲述了php+ajax实输入自动搜索匹配的方法分享给大家供大家参考.具体分析如下: 第一种方法利用了jquery autocomplete,第二种使用了jquery ajax,其实两个都差不多. 最简单的办法我们就是直接使用jquery autocomplete方法了,如下在实例. html中,代码如下: 复制代码代码如下: <script src="/js/v2/jquery.input_complete.js" type="text/javascript&
ThinkPHP使用getlist方法实现数据搜索功能示例

本文实例讲述了ThinkPHP使用getlist方法实现数据搜索功能.分享给大家供大家参考,具体如下: 自己在ThinkPHP之中的model之中书写getlist方法,其实所谓的搜索功能无非就是数据库查询之中用到的like %string%,或者其他的字段名=特定值,这些sql语句拼接在and语句之中: HTML之中: <form action="" method="get"> <table class="account_table
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解

本文实例讲述了thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果.分享给大家供大家参考,具体如下: 用过百度搜索的人应该都知道这个效果,今天我用ThinkPHP+Mysql+Ajax来实现这样的一个效果,首先我把所有的代码都先给大家,最后再来讲解. 百度即时搜索效果图运行效果图数据库截图城市表学校表控制层代码(SchoolController.class.php) <?php namespace Wechat\Controller; use Think\Controll
JS实现canvas仿ps橡皮擦刮卡效果详解

目录效果演示: 主要JS代码实现 <div class="box" id="bb"> <canvas id="cas" width="1366" height="651"></canvas> </div> <script type="text/javascript" charset="utf-8"> var
基于jQuery实现仿百度首页选项卡切换效果

以下代码比较简单,所以没给大家附太多的注释,有问题欢迎给我留言,具体详情请看下文代码吧. 先给大家展示下效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery仿百度首页选项卡切换效果 - 何问起</title&
基于jQuery实现的仿百度首页滑动选项卡效果代码

本文实例讲述了基于jQuery实现的仿百度首页滑动选项卡效果代码.分享给大家供大家参考,具体如下: 今天给大家分享一款基于jQuery的仿百度首页滑动选项卡,可实现tab选项卡内容上下翻滚切换的功能.这款选项卡适用浏览器有:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-baidu-hd-nav-style-codes/ 完整实例代码代码点击
JS简单实现仿百度控制台输出信息效果

本文实例讲述了JS简单实现仿百度控制台输出信息效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <h3>打开控
Mysql 5.7.19 免安装版配置方法教程详解(64位)

官方网站下载mysql-5.7.19-winx64,注意对应系统64位或者32位,这里使用的是64位. 解压放置到本地磁盘.发现文件很大,大概是1.6G左右.删除lib文件夹下的.lib文件和debug文件夹下所有文件. 在主目录下创建my.ini文件,文件内容如下:(这里是简洁版,对应本机修改basedir和datadir的目录,根据需要可以自己扩充配置) [client] port=3306 default-character-set=utf8 [mysqld] basedir=D:\Jav
MySQL通过触发器解决数据库中表的行数限制详解及实例

MySQL通过触发器解决数据库中表的行数限制详解及实例最近项目一个需求是对操作日志的数量限制为10万条,超过十万条便删除最旧的那一条,保存数据库中日志数量不超过10万. 当时我的第一想法是通过触发器来做,便在数据库中执行了如下的SQL: delimiter $ create trigger limitLog before insert on OperationLog for each row begin if (select count(*) from OperationLog) > 1000
jQuery Ajax的readyState和status的区别和使用详解

在前几篇分析了jquery的ajax异步和同步,以及异常的一些处理,感觉还没有把ajax的readyState和status说清楚.今天就来说说ajax状态的那点事. jquery ajax函数源代码是这样的: var getXmlHttpRequest = function () { if (window.XMLHttpRequest) { //主流浏览器提供了XMLHttpRequest对象 return new XMLHttpRequest(); } else if (window.Act
Ajax 入门之 GET 与 POST 的不同处详解

在之前的随笔中,本着怀旧的态度总结了一篇兼容不同浏览器建立XHR对象的方法: 在建立好XHR对象之后,客户端需要做的就是,将数据以某种方式传递到服务器,以获得相应的响应,在这里, Ajax技术总结的第二季,我将重点阐述提交数据的两种方式. 在这之前需要了解一下我们的HTTP传输协议: HTTP 的工作方式是客户机与服务器之间的请求-应答协议. 举例:客户端(浏览器)向服务器提交 HTTP 请求:服务器向客户端返回响应.响应包含关于请求的状态信息以及可能被请求的内容.而想要基于HTTP协议
MySQL 5.7 zip版本(zip版)安装配置步骤详解

前言:重装win10顺带整理文件,然而装个MySQL用了我一下午,真是不值,所以写这篇来帮助大家. 一.下载 https://dev.mysql.com/downloads/mysql/ 二.解压缩zip包三.配置环境变量 (1)配置Path (2)修改mysql-default.ini配置文件原先的: # These are commonly set, remove the # and set as required.# basedir = .....# datadir = .....#

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

相关推荐

随机推荐