php ajax 仿百度查询下拉内容-白红宇的个人博客

发布日期：2021-05-04 09:22:57 浏览次数：15 分类：原创文章

本文共 2463 字，大约阅读时间需要 8 分钟。

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 数组排序(其中的一个值进行排序)(array_multisort实现多维数组按多个值排序问题)

下一篇：TP5 where多条件查询

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章