时间戳

首页 > 解决方案 > 单击函数搜索 Json 对象中的特定元素

jquery - 单击函数搜索 Json 对象中的特定元素

问题描述

我正在设置应用程序的一部分，您可以在其中搜索您的邮政编码，它会为您提供最接近您的邮政编码的转销商，以及转销商的联系信息。我想用一个输入框为它做一个点击功能，搜索应该只搜索客户的邮政编码（我有客户的邮政编码和转售商的邮政编码）。我希望它只搜索 json 文件中的“zipCode”项目。

我试图做一个 keydown 函数来显示带有所选键的项目，但这严重滞后，因为 json 文件中有近 41,000 个对象，所以我需要进行搜索，它只在单击时检索指定的数据所以它不会冻结网络应用程序。

这是包含脚本函数的 HTML 文件：

<!doctype html>
<html lang="en">
  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Search App</title>
  </head>
  <body>
    <p><br><br></p>
    <div class="container">
        <input type="search" class="form-control" id="search">
        <button id="search-button">Search</button>
        <br>
        <table class="table table-stripped table-bordered table-hover">
            <thead>
                <tr>
                    <th>Zip Code</th>
                    <th>City</th>
                    <th>County</th>
                    <th>Type</th>
                    <th>State</th>
                    <th>Rep</th>
                    <th>Street Address</th>
                    <th>Company City</th>
                    <th>Company State</th>
                    <th>Country</th>
                    <th>Company Zip Code</th>
                    <th>Main Phone</th>
                    <th>Fax</th>
                    <th>Contact Email</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <script>
        $('#search-button').click(function() {
            $.getJSON("us-zip-database.json", function(data) {
                var search = $('#search').val();
                var regex = new RegExp(search, 'i');
                var output;
                $.each(data, function(key, val) {
                    output += "<tr>";
                    output += "<td id='"+key+"'>" + val.zipCode + "</td>";
                    output += "<td id='"+key+"'>" + val.city + "</td>";
                    output += "<td id='"+key+"'>" + val.county + "</td>";
                    output += "<td id='"+key+"'>" + val.type + "</td>";
                    output += "<td id='"+key+"'>" + val.state + "</td>";
                    output += "<td id='"+key+"'>" + val.rep + "</td>";
                    output += "<td id='"+key+"'>" + val.streetAddress + "</td>";
                    output += "<td id='"+key+"'>" + val.companyCity + "</td>";
                    output += "<td id='"+key+"'>" + val.companyState + "</td>";
                    output += "<td id='"+key+"'>" + val.companyCountry + "</td>";
                    output += "<td id='"+key+"'>" + val.companyZipCode + "</td>";
                    output += "<td id='"+key+"'>" + val.mainPhone + "</td>";
                    output += "<td id='"+key+"'>" + val.fax + "</td>";
                    output += "<td id='"+key+"'>" + val.contactEmail + "</td>";
                    output += "</tr>";
                });
                $('tbody').html(output);
            });
        });
    </script>
  </body>
</html>

以下是 JSON 文件中的数据示例：

[
        {
            "zipCode": "98001",
            "city": "Auburn",
            "county": "King",
            "type": "Standard",
            "state": "Washington",
            "rep": "Johnson Industries",
            "streetAddress": "1015 S Myrtle St, ",
            "companyCity": "Seattle",
            "companyState": "Washington",
            "companyCountry": "USA",
            "companyZipCode": "98108",
            "mainPhone": 2066228787,
            "fax": 2067631081,
            "contactEmail": "sales@johnsonind-inc.com"
        },
        {
            "zipCode": "98002",
            "city": "Auburn",
            "county": "King",
            "type": "Standard",
            "state": "Washington",
            "rep": "Johnson Industries",
            "streetAddress": "1015 S Myrtle St, ",
            "companyCity": "Seattle",
            "companyState": "Washington",
            "companyCountry": "USA",
            "companyZipCode": "98108",
            "mainPhone": 2066228787,
            "fax": 2067631081,
            "contactEmail": "sales@johnsonind-inc.com"
        },
        {
            "zipCode": "98003",
            "city": "Federal Way",
            "county": "King",
            "type": "Standard",
            "state": "Washington",
            "rep": "Johnson Industries",
            "streetAddress": "1015 S Myrtle St, ",
            "companyCity": "Seattle",
            "companyState": "Washington",
            "companyCountry": "USA",
            "companyZipCode": "98108",
            "mainPhone": 2066228787,
            "fax": 2067631081,
            "contactEmail": "sales@johnsonind-inc.com"
        }
]

标签： jqueryjsonajax

解决方案

您必须使用 javascript 数组过滤器过滤数据，然后在表中显示数据：

<!doctype html>
<html lang="en">
  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Search App</title>
  </head>
  <body>
    <p><br><br></p>
    <div class="container">
        <input type="search" class="form-control" id="search">
        <button id="search-button">Search</button>
        <br>
        <table class="table table-stripped table-bordered table-hover">
            <thead>
                <tr>
                    <th>Zip Code</th>
                    <th>City</th>
                    <th>County</th>
                    <th>Type</th>
                    <th>State</th>
                    <th>Rep</th>
                    <th>Street Address</th>
                    <th>Company City</th>
                    <th>Company State</th>
                    <th>Country</th>
                    <th>Company Zip Code</th>
                    <th>Main Phone</th>
                    <th>Fax</th>
                    <th>Contact Email</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <script>
        $('#search-button').click(function() {
            $.getJSON("us-zip-database.json", function(data) {
                var search = $('#search').val();

                var output;

                data = data.filter(function(obj) {
                    return obj.zipCode.indexOf(search) > -1;
                })


                $.each(data, function(key, val) {
                    output += "<tr>";
                    output += "<td id='"+key+"'>" + val.zipCode + "</td>";
                    output += "<td id='"+key+"'>" + val.city + "</td>";
                    output += "<td id='"+key+"'>" + val.county + "</td>";
                    output += "<td id='"+key+"'>" + val.type + "</td>";
                    output += "<td id='"+key+"'>" + val.state + "</td>";
                    output += "<td id='"+key+"'>" + val.rep + "</td>";
                    output += "<td id='"+key+"'>" + val.streetAddress + "</td>";
                    output += "<td id='"+key+"'>" + val.companyCity + "</td>";
                    output += "<td id='"+key+"'>" + val.companyState + "</td>";
                    output += "<td id='"+key+"'>" + val.companyCountry + "</td>";
                    output += "<td id='"+key+"'>" + val.companyZipCode + "</td>";
                    output += "<td id='"+key+"'>" + val.mainPhone + "</td>";
                    output += "<td id='"+key+"'>" + val.fax + "</td>";
                    output += "<td id='"+key+"'>" + val.contactEmail + "</td>";
                    output += "</tr>";
                });
                $('tbody').html(output);
            });
        });
    </script>
  </body>
</html>

推荐阅读