您的位置 首页 php

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

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

首先将创建一个输入框;然后监听输入框的keyup事件,当事件触发时,使用AJAX请求将输入的内容发送给PHP;接着PHP根据输入的内容进行数据查找并返回;最后将返回的数据进行渲染即可。

示例代码

客户端:

<script>      $(document).ready(function(){          var xhr=null;          $('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));//如果需要数据库长连接,需要最后加一个参数    }  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格式输出)    ?>

推荐教程:《PHP教程》

以上就是PHP结合AJAX实现搜索提示功能的详细内容,更多请关注求知技术网其它相关文章!

文章来源:智云一二三科技

文章标题:PHP结合AJAX实现搜索提示功能

文章地址:https://www.zhihuclub.com/1161.shtml

关于作者: 智云科技

热门文章

网站地图