后端开发|php教程
php,ajax
后端开发-php教程
商城源码可用积分支付,vscode能写c语言嘛,ubuntu十五周年,怎么打开tomcat命令,爬虫优化方法,php 获取url数据,seo新手101指南,手机网站模板免费,娱乐公司网站模板lzw
PHP结合AJAX实现搜索提示功能
wap金融贷款源码,ubuntu 修复驱动,tomcat怎么样打开,销售爬虫软件,php后端工程师,西湖区互联网seo推广lzw
首先将创建一个输入框；然后监听输入框的keyup事件，当事件触发时，使用AJAX请求将输入的内容发送给PHP；接着PHP根据输入的内容进行数据查找并返回；最后将返回的数据进行渲染即可。
thinkphp5源码解析,vscode做折线图,怎么写ubuntu,如何布置tomcat环境,pyspider反爬虫,php mdb 下载,山西seo推广哪家专业,网站下一条文章代码,帝国导航怎么仿别人的网站模板lzw
示例代码
客户端：
$(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 = "
";$.each(json, function () { lists += ""+this.pd_name+"";//遍历出每一条返回的数据});lists+=""; $("#searchBox").html(lists).show();//将搜索到的结果展示出来 $("li").click(function(){ $("#keyword").val($(this).text());//点击某个li就会获取当前的值 $("#searchBox").hide();}) } else {$("#searchBox").hide();}}}); }else{ $("#searchBox").hide();//没有查询结果就隐藏搜索框 }}).blur(function(){ $("#searchBox").hide();//输入框失去焦点的时候就隐藏搜索框}); });
服务端：
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教学》
