input输入框输入数据查询-阿里云开发者社区

input输入框输入数据查询

2023-11-15 40

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： input输入框输入数据查询

在input输入框输入数字的时候，会展示data.json里面的数据，当删掉input输入框输入数字的时候，隐藏出现的data.json数据列表。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title></title>
        <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <style>
            #search_result {
                width: 197px;
                position: absolute;
                left: 17px;
                top: 48px;
                z-index: 1;
                overflow: hidden;
                background: #dcf6f8;
                border: #c5dadb 1px solid;
                border-top: none;
            }
            .line {
                font-size: 12px;
                color: #000;
                background: #ffffff;
                width: 302px;
                height: 30px;
                padding: 2px;
            }
            .hover {
                background: #007ab8;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <div class="col-md-3  col-xs-3">
            <div class="row">
                <div class="form-group" style="margin-top: 10px;">
                    <div class="col-sm-12">
                        <input id="search" type="text" class="form-control input-medium" placeholder="姓名" />
                    </div>
                </div>
            </div>
            <div id="search_result" class=" "></div>
        </div>
    </body>
    <script>
        $(function() {
            /** 搜索模块 */
            $("#search").keyup(
                function(event) {
                    // 获取值
                    var str = $("#search").val();
                    // 去空格
                    str = str.replace(/\s+/g, "");
                    // 如果空、清空结果框
                    if(str == '') {
                        $('#search_result').empty();
                        $('#search_result').css('display', 'none');
                        return;
                    }
                    // 去除特殊符号
                    var key = str.replace("'", "")
                    // 如果是enter键、上下键返回
                    if(event.keyCode == 13 || event.keyCode == 38 ||
                        event.keyCode == 40) {
                        return;
                    }
                    // 清空deviceId
                    $("#did").val("");
                    $.ajax({
                        url: "data.json",
                        type: "get",
                        success: function(data) {
                            /*alert(JSON.stringify(data))*/
                            if(data != '') {
                                var laver;
                                laver = "<table id='ret'>";
                                for(var i = 0; i < data.length; i++) {
                                    laver += "<tr id='sel'><td class='line'>" +
                                        data[i] + "</td></tr>";
                                }
                                laver += "</table>";
                                $('#search_result').empty();
                                $('#search_result').html(laver);
                                $('.line:first').addClass('hover');
                                $('#search_result').css('display', '');
                                $('.line').hover(function() {
                                    $('.line').removeClass('hover');
                                    $(this).addClass('hover');
                                }, function() {
                                    $(this).removeClass('hover');
                                });
                                $('.line').click(function() {
                                    $('#search').val($(this).text());
                                    $('#search_result').empty();
                                    search();
                                })
                            } else {
                                $('#search_result').empty();
                                $('#search_result').css('display', 'none');
                            }
                        }
                    });
                });
        })
    </script>
</html>

data.json

["亚瑟王","典韦","123","亚瑟二号","安琪拉一号","典韦2","安琪拉"]

input输入框输入数据查询

热门文章

最新文章

相关电子书