• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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程序设计有所帮助。

    您可能感兴趣的文章:
    • ThinkPHP实现ajax仿官网搜索功能实例
    • Thinkphp搜索时首页分页和搜索页保持条件分页的方法
    • ThinkPHP让分页保持搜索状态的方法
    • ThinkPHP使用getlist方法实现数据搜索功能示例
    • ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
    • php+ajax实时输入自动搜索匹配的方法
    • php+ajax做仿百度搜索下拉自动提示框(有实例)
    • ajax+php 谷歌搜索框自动填充功能 实例代码
    • thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
    上一篇:详解cookie验证的php应用的一种SSO解决办法
    下一篇:PHP静态延迟绑定和普通静态效率的对比
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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