• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > PHP结合AJAX实现搜索提示功能

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

作者:站长图库 字体:[增加 减小] 来源:互联网 时间:2022-04-29

站长图库向大家介绍了结合AJAX,搜索提示等相关知识,希望对您有所帮助

PHP结合AJAX实现搜索提示功能,有时候我们需要为搜索框加上自动完成功能,也就是搜索提示。


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


方法如下:

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


JS代码:

$(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();//输入框失去焦点的时候就隐藏搜索框    });});

服务端:

<?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结合AJAX实现搜索提示功能的详细内容,具体应用到项目中还需要跟母实际情况改写,这里仅仅一共一种思路。大家可以根据以上方法进行拓展!



分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

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

相关文章

  • 2022-04-29帝国cms模型数据表常用的二次开发的需要的函数
  • 2022-04-29PhotoShop制作逼真的皱褶纸张文字效果教程
  • 2022-04-29织梦熊掌号api自动提交代码
  • 2022-04-2910个值得收藏的CSS实用小技巧
  • 2022-04-29Photoshop教程:教您轻松掌握PS钢笔工具
  • 2022-04-29浅析网页与小程序间怎么进行通信
  • 2022-04-29thinkphp的钩子的两种配置和两种调用方法
  • 2022-04-29PHP怎么去掉富文本样式
  • 2022-04-29Photoshop绘制漂亮的粉色立体心形教程
  • 2022-04-29帝国CMS后台密码忘了怎么办,找回密码的两种方法

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • thinkphp5 redis缓存新增方法实例讲解
    • JS如何实现数组数据的上移下移
    • html5的drag和drop的用法示例
    • Photoshop制作3D小人推动切割的艺术字教程
    • 介绍Laravel8路由模块新增missing方法
    • PhotoShop打造抽象几何时尚美女海报制作教程
    • 教你5个让Vue3开发更顺畅的知识点
    • Illustrator绘制心形效果的粉色海报
    • Photoshop制作水彩喷溅效果的艺术字
    • 最全的php数组操作方法汇总,让你轻松掌握!

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有