php+ajax实现仿百度查询下拉内容功能示例


Posted in PHP onOctober 20, 2017

本文实例讲述了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="">
    <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 相关文章推荐
将数字格式的计算结果转为汉字格式
Oct 09 PHP
一个简单的域名注册情况查询程序
Oct 09 PHP
php获取mysql版本的几种方法小结
Mar 25 PHP
PHP页面间传递参数实例代码
Jun 05 PHP
php在程序中将网页生成word文档并提供下载的代码
Oct 09 PHP
浅析php与数据库代码开发规范
Aug 08 PHP
codeigniter自带数据库类使用方法说明
Mar 25 PHP
PHP中copy on write写时复制机制介绍
May 13 PHP
php实现搜索类封装示例
Mar 31 PHP
php自定义函数实现JS的escape的方法示例
Jul 07 PHP
PHP实现的一致性Hash算法详解【分布式算法】
Mar 31 PHP
解决php extension 加载顺序问题
Aug 16 PHP
详解cookie验证的php应用的一种SSO解决办法
Oct 20 #PHP
thinkPHP5项目中实现QQ第三方登录功能
Oct 20 #PHP
PHP简单实现二维数组赋值与遍历功能示例
Oct 19 #PHP
phpStudy2016 配置多个域名期间遇到的问题小结
Oct 19 #PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
Oct 19 #PHP
PHP自定义函数实现数组比较功能示例
Oct 19 #PHP
phpstudy的php版本自由修改的方法
Oct 18 #PHP
You might like
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
教你如何用php实现LOL数据远程获取
2014/06/10 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
js 调用父窗口的具体实现代码
2013/07/15 Javascript
JavaScript实现继承的4种方法总结
2014/10/16 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
Js面试算法详解
2018/04/08 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
python实现读取命令行参数的方法
2015/05/22 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
使用Python 统计高频字数的方法
2019/01/31 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
python实发邮件实例详解
2019/11/11 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
Python连接mysql方法及常用参数
2020/09/01 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
小蚁科技官方商店:YI Technology
2019/08/23 全球购物
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
工程开工庆典邀请函
2014/02/01 职场文书
《我的第一本书》教学反思
2014/02/15 职场文书
单位委托书范本
2014/04/04 职场文书
营销团队口号
2014/06/06 职场文书
工程部文员岗位职责
2015/02/04 职场文书
2015年电工工作总结
2015/04/10 职场文书
本科毕业论文答辩稿
2015/06/23 职场文书
同步小康驻村工作简报
2015/07/20 职场文书