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 相关文章推荐
Discuz 6.0+ 批量注册用户名
Sep 13 PHP
PHP 日常开发小技巧
Sep 23 PHP
mac下安装nginx和php
Nov 04 PHP
PHP实现克鲁斯卡尔算法实例解析
Aug 22 PHP
php新浪微博登录接口用法实例
Dec 23 PHP
ioncube_loader_win_5.2.dll的错误解决方法
Jan 04 PHP
Laravel实现用户注册和登录
Jan 23 PHP
分享php分页的功能模块
Jun 16 PHP
php获取开始与结束日期之间所有日期的方法
Nov 29 PHP
php mysql实现mysql_select_db选择数据库
Dec 30 PHP
分享8个Laravel模型时间戳使用技巧小结
Feb 12 PHP
禁止直接访问php文件代码分享
May 05 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
第十五节--Zend引擎的发展
2006/11/16 PHP
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
PHP正则的Unknown Modifier错误解决方法
2010/03/02 PHP
jQuery中after的两种用法实例
2013/07/03 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
小米公司JavaScript面试题
2014/12/29 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
jQuery插件Tmpl的简单使用方法
2015/04/27 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
react实现pure render时bind(this)隐患需注意!
2017/03/09 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
安装Python的教程-Windows
2017/07/22 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
为什么说python更适合树莓派编程
2020/07/20 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
python向企业微信发送文字和图片消息的示例
2020/09/28 Python
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
专升本学生毕业自我鉴定
2014/10/04 职场文书
信访稳定工作汇报
2014/10/27 职场文书
2016继续教育研修日志
2015/11/13 职场文书
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技