首页 > 教程 >
PHP结合AJAX实现搜索提示功能
2023-02-15教程围观次
简介PHP结合AJAX实现搜索提示功能,有时候我们需要为搜索框加上自动完成功能,也就是搜索提示。方法如下:首先将创建一个输入框;然后监听输入框的keyup事件,当事件触发时,使用AJAX请求将输入的内容发送给PHP;接着PHP根据输入的内容进行数据查找并返回;最后将返回的数据进行渲染即可。JS代码:$(document).ready(function(){varxhr=null;$('input[na
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实现搜索提示功能的详细内容,具体应用到项目中还需要跟母实际情况改写,这里仅仅一共一种思路。大家可以根据以上方法进行拓展!
下载链接:网站源码/小程序源码/网站模板下载
下载排行
最新发布
-
最新去水印小程序源码分享/无需后台/对接接口/支持全网去水印功能
-
群多多社群人脉H5-2.1.4多开插件+小程序独立前端+搭建教程
-
七夕情侣飞行棋游戏限定版本源码/解锁版
-
苹果CMS海螺模版V20修复版/加广告代码
-
宠物社区风格 商业版(GBK)Discuz模板
-
全新UI基于Thinkphp的最新自助打印系统/云打印小程序源码/附教程
-
易优CMS家纺家居装饰类网站模板/EyouCMS家具家居类企业网站模板
-
EyouCMS艺术***摄影工作室网站模板/易优CMS摄影工作室网站模板
-
易优CMS响应式精品茶具实木茶盘销售网站模板/EyouCMS响应式酒水饮料类企业网站模板
-
EyouCMS响应式推土机挖掘机机械类网站模板/易优CMS机械设备类企业网站模板