• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

PHP结合AJAX实现搜索提示功能

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

  PHP结合AJAX实现搜索提示功能
  首先将创建一个输入框;然后监听输入框的keyup事件,当事件触发时,使用AJAX请求将输入的内容发送给PHP;接着PHP根据输入的内容进行数据查找并返回;最后将返回的数据进行渲染即可。
  示例代码
  客户端:
  <script>
  $(document).ready(function(){
  var xhr=null;https://www.weixiu3721.com
  $(\'input[name="keyword"]\').keyup(function() {
  if(xhr){
  xhr.abort();//如果存在ajax的请求,就放弃请求
  }
  var inputText= $.trim(this.value);
  if(inputText!=""){//检测键盘输入的内容是否为空,为空就不发出请求
  xhr=$.ajax({
  type: \'GET\',
  url: \'service/suggestion.php\',
  cache:false,//不从浏览器缓存中加载请求信息
  data: "keyword=" + inputText,//向服务器端发送的数据
  dataType: \'json\',//服务器返回数据的类型为json
  success: function (json) {
  if (json.length != 0) {//检测返回的结果是否为空
  var lists = "<ul>";
  $.each(json, function () {
  lists += "<li>"+this.pd_name+"</li>";//遍历出每一条返回的数据
  });
  lists+="</ul>";
  $("#searchBox").html(lists).show();//将搜索到的结果展示出来
  $("li").click(function(){
  $("#keyword").val($(this).text());//点击某个li就会获取当前的值
  $("#searchBox").hide();
  })
  } else {
  $("#searchBox").hide();
  }
  }
  });
  }else{
  $("#searchBox").hide();//没有查询结果就隐藏搜索框
  }
  }).blur(function(){
  $("#searchBox").hide();//输入框失去焦点的时候就隐藏搜索框
  });
  });
  </script>
  服务端:
  <?php
  session_start();
  function connectDb(){//连接数据库的函数
  $db_server="localhost";
  $db_name="test";//数据库的名称
  $db_user="root";//数据库的用户名,不同的用户权限不同
  $db_pwd="";//数据库的密码
  $dsn="mysql:host=$db_server;dbname=$db_name;charset=utf8";//使用PDO的方法连接数据库
  try{
  $connect=new PDO($dsn,$db_user,$db_pwd,array(PDO::ATTR_PERSISTENT=>true));//如果需要数据库长连接,需要最后加一个参数
  }https://www.weixiu3721.com
  catch(PDOException $e){
  exit(\'数据库连接失败\');
  }
  return $connect;
  }
  function test($keyword){//从数据库中查找关键字的函数
  $db=connectDb();
  $result=$db->prepare("select 字段名 from 数据库名字 where 字段名 like ?");
  $result->bindParam(1,$keyword);//第一个问号的值
  $result=>execute;
  return $result->fetchAll(PDO::FETCH_ASSOC);
  }
  $keyword=$_GET[\'keyword\'];//获取输入框的内容
  $suggestion=test($keyword);
  echo json_encode($suggestion);//输出查询的结果(json格式输出)
  ?>


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
使用cron+php脚本监控后台任务脚本发布时间:2022-07-10
下一篇:
php 各种框架优缺点 及 laravel框架与thinkPHP框架的区别发布时间:2022-07-10
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap