zoukankan      html  css  js  c++  java
  • PHP结合AJAX实现搜索提示功能

      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格式输出)
      ?>

  • 相关阅读:
    面试题之发散思维能力:如何用非常规方法求1+2+···+n
    优秀Python学习资源收集汇总(强烈推荐)
    JavaScript简洁继承机制实现(不使用prototype和new)
    JsRender for index 循环索引使用说明
    JsRender for object 语法说明
    pasteimg浏览器中粘贴图片jQuery插件
    西安电子科技大学泄漏信息
    移动端二维码弹出框,自适应屏幕尺寸
    服务器端json数据文件分割合并解决方案
    html中a标签href属性的一个坑
  • 原文地址:https://www.cnblogs.com/zqw111/p/12935246.html
Copyright © 2011-2022 走看看