php+ajax实现仿百度查询下拉内容功能示例
2017-10-20 12:19
991 查看
本文实例讲述了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=""> <div class="search-wrap"> <input type="text" id="search"> <ul id="xiala"> </ul> <input type="button" value="go" id="sousuo"> <div id="searVal" style="display:inline-block;border:1px solid #ccc"></div> </div> </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
更多关于PHP相关内容感兴趣的读者可查看本站专题:《PHP+ajax技巧与应用小结》、《PHP网络编程技巧总结》、《PHP基本语法入门教程》、《php面向对象程序设计入门教程》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》
希望本文所述对大家PHP程序设计有所帮助。
您可能感兴趣的文章:
- AJAX for PHP简单表数据查询实例
- PHP+Ajax 网站SEO查询工具 提供代码
- php+mysql+ajax实现单表多字段多关键词查询的方法
- PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
- ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
- php+ajax做仿百度搜索下拉自动提示框(有实例)
- PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
- 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
- PHP+原生态ajax实现的省市联动功能详解
- Thinkphp结合AJAX长轮询实现PC与APP推送详解
相关文章推荐
- php实现查询百度google收录情况(示例代码)
- PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
- php实现查询百度google收录情况(示例代码)
- PHP+mysql实现从数据库获取下拉树功能示例
- PHP实现多个关键词搜索查询功能示例
- 用PHP实现站长工具中查询google,百度收录情况的功能
- PHP+MySQL实现模糊查询员工信息功能示例
- Angular实现下拉框模糊查询功能示例
- php实现查询百度google收录情况(示例代码)
- php ajax 仿百度查询下拉内容
- PHP+Ajax实现的博客文章添加类别功能示例
- PHP调用API接口实现天气查询功能的示例
- 利用PHP访问数据库_实现分页功能与多条件查询功能的示例
- PHP+ajax实现二级联动菜单功能示例
- PHP实现的注册,登录及查询用户资料功能API接口示例
- jQuery+PHP+ajax实现微博加载更多内容列表功能
- PHP实现生成数据字典功能示例
- ThinkPHP5框架实现简单的批量查询功能示例
- php利用云片网实现短信验证码功能的示例代码
- Select下拉框模糊查询功能实现代码