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 相关文章推荐
手把手教你使用DedeCms V3的在线采集图文教程
Apr 03 PHP
在命令行下运行PHP脚本[带参数]的方法
Jan 22 PHP
PHP-Fcgi下PHP的执行时间设置方法
Aug 02 PHP
header导出Excel应用示例
Jan 24 PHP
php图片缩放实现方法
Feb 20 PHP
详解PHP的Yii框架中日志的相关配置及使用
Dec 08 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
Mar 14 PHP
IOS 开发之NSDictionary转换成JSON字符串
Aug 14 PHP
深入理解PHP中mt_rand()随机数的安全
Oct 12 PHP
PHP JWT初识及其简单示例
Oct 10 PHP
laravel返回统一格式错误码问题
Nov 04 PHP
php传值和传引用的区别点总结
Nov 19 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面向对象全攻略 (五) 封装性
2009/09/30 PHP
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
浅析js封装和作用域
2013/07/09 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
js实现导航跟随效果
2018/11/17 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
vue-resource 拦截器interceptors使用详解
2021/01/18 Vue.js
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
python @property的用法及含义全面解析
2018/02/01 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
详解Python中的分支和循环结构
2020/02/11 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
给儿子的表扬信
2014/01/15 职场文书
民事诉讼授权委托书范文
2014/08/02 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
单位介绍信格式
2015/01/31 职场文书