js、ajax 输入框自动匹配

来源：互联网发布：剑三捏脸数据17173 编辑：程序博客网时间：2024/06/03 19:43

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>

阅读全文

2 0