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实现搜索提示功能的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！