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

更新时间：2017年10月20日 12:19:50 作者：我是高手高手高高手

这篇文章主要介绍了php+ajax实现仿百度查询下拉内容功能,结合具体实例形式分析了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+ajax技巧与应用小结》、《PHP网络编程技巧总结》、《PHP基本语法入门教程》、《php面向对象程序设计入门教程》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》

希望本文所述对大家PHP程序设计有所帮助。

您可能感兴趣的文章:

php
ajax

PHP mkdir创建文件夹实现方法解析
这篇文章主要介绍了PHP mkdir创建文件夹实现方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-11-11
php链式操作的实现方式分析
这篇文章主要介绍了php链式操作的实现方式,结合实例形式对比分析了常规调用与链式调用操作的相关实现技巧与操作注意事项,需要的朋友可以参考下
2019-08-08
PHP生成月历代码
PHP生成月历代码...
2007-06-06
PHP大文件分块上传功能实例详解
这篇文章主要介绍了PHP大文件分块上传功能,结合实例形式详细分析了前端文件分块提交传输与后台php接收、合并文件相关操作技巧,需要的朋友可以参考下
2019-07-07
php将csv文件导入到mysql数据库的方法
这篇文章主要介绍了php将csv文件导入到mysql数据库的方法,通过读取csv文件到数组再调用while循环实现插入数据到数据库,是非常实用的技巧,需要的朋友可以参考下
2014-12-12
PHP 解决utf-8和gb2312编码转换问题
就一个很简单的函数iconv();但是就是这个函数在网上找了很多例子，都无法成功转换，这是为什么呢？
2010-03-03
php中-> 、=>、::、$this->四种常见符号使用方法技巧
php中-> 、=>、::、$this->四种符号在代码中很常见,使用很广泛。这篇文章主要介绍了php中-> 、=>、::、$this->四种常见符号使用方法技巧
2022-12-12
PHP微信发送推送消息乱码的解决方法
今天小编就为大家分享一篇关于PHP微信发送推送消息乱码的解决方法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-02-02
在Windows XP下安装Apache+MySQL+PHP环境
这篇文章主要介绍了在Windows XP下安装Apache+MySQL+PHP环境的要点分析,需要的朋友可以参考下
2015-02-02
PHP组合模式Composite Pattern优点与实现过程
这篇文章主要介绍了PHP组合模式Composite Pattern优点与实现，组合模式是一种结构型模式，它允许你将对象组合成树形结构来表示“部分-整体”的层次关系。组合能让客户端以一致的方式处理个别对象和对象组合
2023-03-03