Question

任何人都可以帮助我，我是json和ajax的新手，我正在使用json和ajax进行一个小项目。我的问题是，当我在searh中写东西时，它在结果div中显示了所有相关结果。但是我想要当我单击任何结果时，在#stage div的同一城市陈列室中显示相关内容。有人可以告诉我如何制作此过滤器吗？

<pre>
    <div class="container" style="width:900px;">
        <h2 align="center">JSON Live Data Search using Ajax JQuery</h2>
        <h3 align="center">Employee Data</h3>   
        <br /><br />
        <div align="center">
            <input type="text" name="search" id="search" placeholder="Search Employee Details" class="form-control working" />
        </div>
        <button id="empname" name="empname_li">Name</button>
        <ul class="list-group" id="result"></ul>
        <br />
    </div>
    <div  id="stage"></div>
</pre>

这是我的ajax代码。

$(document).ready(function(){
    $.ajaxSetup({ cache: false });
    $('#search').keyup(function(){
        var searchField= $('#search').val();
        if(searchField == ""){
            $('#result').html('');
        }
        else{
            $('#result').html('');
            $('#state').val('');
            var expression = new RegExp(searchField, "i");
            $.getJSON('json_data.json', function(data) {
                $.each(data, function(key, value){
                    if (value.showroomname.search(expression) != -1 || value.statename.search(expression) != -1 ){
                        $('#result').append('<li class="list-group-item link-class"><span>'+value.showroomname+
                            '</span> <span class="statement">'+value.statename+'</span></li>');
                    }
                });  
            });
        }
    });         
    $('#result').on('click', 'li', function() {
        $('#stage .list-group-item').remove();
        $(this).clone().appendTo('#stage');
        $(this).siblings().clone().appendTo('#stage');
        var click_text = $(this).text().split('|');
        $('#search').val($.trim(click_text));
        $("#result").html('');
    });

});

这是我的json代码

    [
      {
        "showroomname": "karama",
        "showroomphone" : "920023345",
        "showroomdistance" : "4m",
        "showroomservices": ["Showroom Sales", "Spare Parts", "Quick Service" ],
        "showroomemail" : "info@hafiz.com",
        "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
        "statename" : "Dubai"
      },
      {
        "showroomname": "financial center",
        "showroomphone" : "920023345",
        "showroomdistance" : "44.3 m",
        "showroomservices": ["Showroom Sales", "Service Centre", "Spare Parts" ],
        "showroomemail" : "info@hafiz.com",
        "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
        "statename" : "Dubai"
      },
      {
        "showroomname": "downtown",
        "showroomphone" : "920023345",
        "showroomdistance" : "213.6 m",
        "showroomservices": ["Showroom Sales", "Service Centre", "Spare Parts", "Quick Service" ],
        "showroomemail" : "info@hafiz.com",
        "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
        "statename" : "Dubai"
      },
      {
        "showroomname": "jumierah",
        "showroomphone" : "920023345",
        "showroomdistance" : "100 m",
        "showroomservices": ["Service Centre", "Spare Parts", "Quick Service" ],
        "showroomemail" : "info@hafiz.com",
        "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
        "statename" : "Dubai"
      },
      {
        "showroomname": "Al Qouz",
        "showroomphone" : "920023345",
        "showroomdistance" : "213.6 m",
        "showroomservices": ["Showroom Sales", "Service Centre", "Quick Service" ],
        "showroomemail" : "info@hafiz.com",
        "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
        "statename" : "Dubai"
      },
      {
        "showroomname": "Al Barsha",
        "showroomphone" : "920023345",
        "showroomdistance" : "213.6 m",
        "showroomservices": ["Showroom Sales", "Spare Parts", "Quick Service" ],
        "showroomemail" : "info@hafiz.com",
        "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
        "statename" : "Dubai"
      },
      {
        "showroomname": "Al Masaood Automobiles - Nissan, Infiniti Showroom",
        "showroomphone" : "920023345",
        "showroomdistance" : "44.3 m",
        "showroomservices": ["Showroom Sales", "Service Centre", "Spare Parts" ],
        "showroomemail" : "info@hafiz.com",
        "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
        "statename" : "Abu Dhabi"
      },
      {
        "showroomname": "FLEET SHOWROOM",
        "showroomphone" : "920023345",
        "showroomdistance" : "213.6 m",
        "showroomservices": ["Showroom Sales", "Service Centre", "Spare Parts", "Quick Service" ],
        "showroomemail" : "info@hafiz.com",
        "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
        "statename" : "Abu Dhabi"
      },
      {
        "showroomname": "INFINITI",
        "showroomphone" : "920023345",
        "showroomdistance" : "100 m",
        "showroomservices": ["Service Centre", "Spare Parts", "Quick Service" ],
        "showroomemail" : "info@hafiz.com",
        "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
        "statename" : "Abu Dhabi"
      },
      {
        "showroomname": "Ford Showroom",
        "showroomphone" : "920023345",
        "showroomdistance" : "213.6 m",
        "showroomservices": ["Showroom Sales", "Service Centre", "Quick Service" ],
        "showroomemail" : "info@hafiz.com",
        "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
        "statename" : "Abu Dhabi"
      },
      {
        "showroomname": "Al Habtoor Motors Royal Car",
        "showroomphone" : "920023345",
        "showroomdistance" : "213.6 m",
        "showroomservices": ["Showroom Sales", "Spare Parts", "Quick Service" ],
        "showroomemail" : "info@hafiz.com",
        "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
        "statename" : "Abu Dhabi"
      }

    ]

Answer 1

基本上，您的代码在我的VS中工作正常。我无法确定您的问题。在我的桌面上工作的代码。一页中的所有代码（index.html）。 jQuery-3.4.0

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
    <div class="container" style="width:900px;">
        <h2 align="center">JSON Live Data Search using Ajax JQuery</h2>
        <h3 align="center">Employee Data</h3>
        <br /><br />
        <div align="center">
            <input type="text" name="search" id="search" placeholder="Search Employee Details" class="form-control working" />
        </div>
        <button id="empname" name="empname_li">Name</button>
        <ul class="list-group" id="result"></ul>
        <br />
    </div>
    <div id="stage"></div>
    <script>
        $(document).ready(function () {
            $.ajaxSetup({ cache: false });
            $('#search').keyup(function () {
                var searchField = $('#search').val();
                if (searchField == "") {
                    $('#result').html('');
                }
                else {
                    $('#result').html('');
                    $('#state').val('');
                    var expression = new RegExp(searchField, "i");
                    $.getJSON('json_data.json', function (data) {
                        $.each(data, function (key, value) {
                            if (value.showroomname.search(expression) != -1 || value.statename.search(expression) != -1) {
                                $('#result').append('<li class="list-group-item link-class"><span>' + value.showroomname +
                                    '</span> <span class="statement">' + value.statename + '</span></li>');
                            }
                        });
                    });
                }
            });
            $('#result').on('click', 'li', function () {
                $('#stage .list-group-item').remove();
                $(this).clone().appendTo('#stage');
                $(this).siblings().clone().appendTo('#stage');
                var click_text = $(this).text().split('|');
                $('#search').val($.trim(click_text));
                $("#result").html('');
            });

        });
    </script>
</body>
</html>

对json内容进行过滤时遇到问题？

1 个答案: