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实现像JSP,ASP里Application那样的全局变量
Jan 12 PHP
PHP mkdir()定义和用法
Jan 14 PHP
smarty 缓存控制前的页面静态化原理
Mar 15 PHP
PHP加Nginx实现动态裁剪图片方案
Mar 10 PHP
ThinkPHP登录功能的实现方法
Aug 20 PHP
php使用curl简单抓取远程url的方法
Mar 13 PHP
带你了解PHP7 性能翻倍的关键
Nov 19 PHP
PHP+ajax分页实例简析
Dec 07 PHP
PHP批量获取网页中所有固定种子链接的方法
Nov 18 PHP
浅析PHP数据导出知识点
Feb 17 PHP
thinkPHP5.1框架中Request类四种调用方式示例
Aug 03 PHP
PHP调用接口API封装的例子
Oct 11 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
substr()函数中文版
2006/10/09 PHP
为PHP5.4开启Zend OPCode缓存
2014/12/26 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
vue使用recorder.js实现录音功能
2019/11/22 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
Python 返回汉字的汉语拼音
2009/02/27 Python
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
python 日期操作类代码
2018/05/05 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
Python如何转换字符串大小写
2020/06/04 Python
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
类和结构的区别
2012/08/15 面试题
在职人员函授期间自我评价分享
2013/11/08 职场文书
初中生学习的自我评价
2013/11/14 职场文书
职务说明书范文
2014/05/07 职场文书
计生个人工作总结
2015/02/28 职场文书
孝女彩金观后感
2015/06/10 职场文书