js、ajax 输入框自动匹配

最新推荐文章于 2020-12-05 17:54:16 发布

strong-Yang

最新推荐文章于 2020-12-05 17:54:16 发布

阅读量830

点赞数 3

文章标签：输入框自动匹配

本文链接：https://blog.csdn.net/qq_36709366/article/details/76230319

版权

js、ajax 输入框自动匹配

   想做一个输入框自动匹配的功能，在网上找了好多的都没有找到想要的，可能是因为自己太笨了看不懂...所以就总结网上查找到的方法，自己写了一个，写出来是想分享给大家也是给自己的再加深一下印象。因为自己现在也是新手，代码质量不高，大家有好的建议也可以提出来哦。
   这个功能大概的思路是：在输入框下面添加一个div,用来显示匹配到的数据。这个div贴紧输入框，在输入框里没有输入东西时是隐藏起来的，用样式display为none实现这个功能。给输入框添加一个keyup()函数，输入的东西传到后台匹配，再将匹配到的数据传回前台，这时在函数里将显示数据的div的display设置为block就可以将数据展示出来。
   下面是功能图片展示和前台页面的代码，因为后台数据是用spring-boot框架结合ajax取的，所以要成功运行代码大家要改一下数据获取方式。

功能展示
输入字符后显示匹配信息
鼠标滑过和点击高亮显示
输入框显示选中的值
删掉一个字符后自动匹配

前台页面代码

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>下拉列表</title>

    <style>
        .tptitle{/*输入框所在的div*/
            position:absolute;
            top:0;
            left:0;
            height:30%;
            width:100%;
            border-width:1px;
            border-color:black;
            border-style: solid;
        }
        .tptitle_table{/*输入框所在的table*/
            position:absolute;
            top:10%;
            left:200px;
            height:10%;
            width:70%;
        }
        #typhooncode{/*输入框*/
            height:15px;
            width:180px;
        }
        #autoresult{/*在输入框下面用来显示匹配数据的div*/
            position:absolute;
            left:306px;
            top: 20.5%;
            height:150px;
            width:182px;
            border-width:1px;
            border-color:black;
            border-style: solid;
            overflow :auto;
            display:none;/*把div隐藏起来*/
        }
        #list{/*显示匹配数据的li*/
            position:absolute;
            top:0;
            left:0;
            text-align: left;
        }
        .result_li{/*显示数据的li*/
            list-style-type:none;/*去掉前面的原点符号*/
        }
    </style>
</head>
<script src="js/jquery-3.2.1.js"></script>
    <div class="tptitle" >

        <table class="tptitle_table" >
            <tr>
                <td width="100px">台风代码：</td>
                <td><input type="text" id="typhooncode" placeholder="请输入台风代码" /></td>
                <td>台风登录地：</td>
                <td><input type="text" id="landing_position1" /></td>
                <td>台风路径测试：</td>
                <td><input type="text" id="pathcode" placeholder="请输入台风代码"/></td>
                <td><input type="submit" onclick="test()" value="提交路径代码"/></td>
            </tr>
        </table>
        <div id="autoresult">
            <ul id="list"></ul>
        </div>
    </div>

    <script>
        //键盘--传递数据到后台再返回输出
        $(document).ready(function(){
            $("input#typhooncode,#landing_position1").keyup(function(){
                var typhooncode = document.getElementById("typhooncode").value;
                var landing_position1 = document.getElementById("landing_position1").value;
                $.post('api/base/test2', {typhooncode: typhooncode,landing_position1:landing_position1}, function (data) {
                    //console.log(data);测试有没有数据

                    var json = eval(data); //用eval()函数解析json对象
                    var tt = "";
                    $.each(json, function (index) {
                        //循环获取数据
                        var Month = json[index].typhooncode;
                        //在li元素里添加函数
                        tt += "<li class='result_li' onmouseover='mouseOver(this)' onmouseout='mouseOut(this)' onclick='mouseClick(this)'>"+ Month + "</li>";
                    });
                    document.getElementById("autoresult").style.display="block";//显示隐藏的div
                    $("#list").html('');
                    $("#list").html(tt);//将匹配数据显示到设置好的ul里
                })
            });
        });

        //点击变色
        var overColor='rgb(128, 188, 241)';//移入时的颜色
        var outColor='rgb(255, 255, 255)';//移出时的颜色
        var clickColor='rgb(68, 165, 251)';//点击时的颜色

        function mouseOver(obj) {
            if(obj.style.backgroundColor!=clickColor)
                obj.style.backgroundColor=overColor;
        }
        function mouseOut(obj){
            if(obj.style.backgroundColor!=clickColor)
                obj.style.backgroundColor=outColor;
        }
        function mouseClick(obj) {
            $(obj).siblings().css("background-color",outColor);//将所有的li元素背景设置为outColor
            obj.style.backgroundColor=clickColor;//将被点击到的li元素背景设置为clickColor
            var mClick=$(obj).text();//获取被点击（选中）li元素的文本内容
            $("#typhooncode").val(mClick);//将输入框的值替换为选中项内显示
            $("#autoresult").css("display","none");//隐藏显示匹配数据的div

        }

    </script>

</body>
</html>