这篇文章主要介绍了php+ajax实现查询下拉内容功能,结合具体实例形式分析了php结合ajax动态查询功能的相关实现技巧,需要的朋友可以参考下本文实例讲述了php+ajax实现仿百度查询下拉内容功能。分享给大家供大家参考，具体如下：
运行效果如下：
html代码：
<DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <style type="text/css"> body{ margin:0; padding: 0; } form{ width: 500px; margin:40px auto; } .search-wrap{ position: relative; } li{ padding: 0; padding-left: 10px; list-style: none; } li:hover{ background-color: #ccc; color: #fff; cursor: pointer; } #xiala{ position: absolute; top: 40px; left: 0; background-color: #c2c2c2; width: 200px; margin:0; padding: 0 ; display: none; } </style></head><body> <form action=""> <p class="search-wrap"> <input type="text" id="search"> <ul id="xiala"> </ul> <input type="button" value="go" id="sousuo"> <p id="searVal" style="display:inline-block;border:1px solid #ccc"></p> </p> </form></body><script type="text/javascript"> var search=$("#search"); search.on("input"function(){ //输入框内容改变发请求 $.ajax({ url:'a.txt' type:'GET' async:true, data:{value:$("#search").val()}, success:function(data){ var arr=data.split(''); console.log(arr); $("#xiala").html(""); $.each(arr,function(i,n){ var oLi=$("<li>"+arr[i]+"</li>"); $("#xiala").append(oLi); $("#xiala").css("display""block"); }) } }); $("#xiala").css("display""block"); //内容改变下拉框显示 $("#searVal").html(search.val()) }) function stopPropagation(e) { if (e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble = true; } } $(document).on('click'function(){ //点击页面的时候下拉框隐藏 $("#xiala").css("display""none"); }); $(document).on("click""#xiala li"function(){ //点击下拉框选项的时候改变输入框的值 search.val($(this).text()); $("#searVal").html($(this).text()); $("#xiala").css("display""none"); })</script></html>a.txt内容：
a,b,c,d,e,f,g相关推荐：ThinkPHP框架用户信息查询更新与删除步骤详解
Laravel5实现模糊匹配加多条件查询功能实现步骤详解
thinkPHP5框架实现分页查询步骤详解
问：株洲市住房公积金中心个人用户网上查询能实现哪些查询功能？
答：目前我中心网站个人用户专区网上查询可以实现以下功能： ①可以查询职工在我中心登记的基本信息; ②可以查询职工住房公积金的缴存明细; ③可以查询住房公...详情>>
答：详情>>
