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 相关文章推荐
php学习之 认清变量的作用范围
Jan 26 PHP
php中读写文件与读写数据库的效率比较分享
Oct 19 PHP
php生成excel列序号代码实例
Dec 24 PHP
php版淘宝网查询商品接口代码示例
Jun 17 PHP
PHP中调用SVN命令更新网站方法
Jan 07 PHP
php结合web uploader插件实现分片上传文件
May 10 PHP
php使用Jpgraph创建折线图效果示例
Feb 15 PHP
PHP实现的激活用户注册验证邮箱功能示例
Jun 06 PHP
ThinkPHP 3使用OSS的方法
Jul 19 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
Sep 07 PHP
PhpStorm配置Xdebug调试的方法步骤
Feb 02 PHP
PHP $O00OO0=urldecode &amp; eval 解密,记一次商业源码的去后门
Sep 13 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制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
PHP加密解密类实例分析
2015/04/20 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
js实现div闪烁原理及实现代码
2014/06/24 Javascript
JavaScript实现继承的4种方法总结
2014/10/16 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
详解react-refetch的使用小例子
2019/02/15 Javascript
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
pip安装py_zipkin时提示的SSL问题对应
2018/12/29 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
Django使用unittest模块进行单元测试过程解析
2019/08/02 Python
python编写计算器功能
2019/10/25 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
音乐学个人的自荐书范文
2013/11/26 职场文书
售后专员岗位职责
2013/12/08 职场文书
通信生自我鉴定
2014/01/18 职场文书
会计岗位职责范本
2014/03/07 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
golang 实现并发求和
2021/05/08 Golang