возникли проблемы, чтобы сделать фильтр для содержимого JSON? - PullRequest
Новая
       3

возникли проблемы, чтобы сделать фильтр для содержимого JSON?

0 голосов
/ 27 мая 2019

Не могли бы вы помочь мне, пожалуйста, я новичок в json и ajax, я работаю над небольшим проектом с json и ajax.моя проблема в том, что когда я пишу что-то внутри поисков, оно показывает все связанные результаты в результате div.но я хочу, чтобы, когда я нажимал на любой результат, он показывал связанный с этим же выставочный зал города в #stage div.Может кто-нибудь сказать мне, как сделать этот фильтр? 

<code><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>

вот мой код 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"
      }

    ]

1 Ответ

0 голосов
/ 31 мая 2019

В основном ваш код работает нормально в моей 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...