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

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

вот мой код 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('{amp}lt;li class="list-group-item link-class"{amp}gt;{amp}lt;span{amp}gt;' value.showroomname  '{amp}lt;/span{amp}gt; {amp}lt;span class="statement"{amp}gt;' value.statename '{amp}lt;/span{amp}gt;{amp}lt;/li{amp}gt;'); } }); }); } }); $('#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(''); }); }); . $(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('{amp}lt;li class="list-group-item link-class"{amp}gt;{amp}lt;span{amp}gt;' value.showroomname  '{amp}lt;/span{amp}gt; {amp}lt;span class="statement"{amp}gt;' value.statename '{amp}lt;/span{amp}gt;{amp}lt;/li{amp}gt;'); } }); }); } }); $('#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" } ] 

В основном ваш код работает нормально в моем VS. Я не могу определить вашу проблему. Код, который работал на моем рабочем столе. Весь код на одной странице (index.html). JQuery — 3.4,0

 {amp}lt;html{amp}gt; {amp}lt;head{amp}gt; {amp}lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div class="container" style="width:900px;"{amp}gt; {amp}lt;h2 align="center"{amp}gt;JSON Live Data Search using Ajax JQuery{amp}lt;/h2{amp}gt; {amp}lt;h3 align="center"{amp}gt;Employee Data{amp}lt;/h3{amp}gt; {amp}lt;br /{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;div align="center"{amp}gt; {amp}lt;input type="text" name="search" id="search" placeholder="Search Employee Details" class="form-control working" /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;button id="empname" name="empname_li"{amp}gt;Name{amp}lt;/button{amp}gt; {amp}lt;ul class="list-group" id="result"{amp}gt;{amp}lt;/ul{amp}gt; {amp}lt;br /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div id="stage"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;script{amp}gt; $(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('{amp}lt;li class="list-group-item link-class"{amp}gt;{amp}lt;span{amp}gt;'   value.showroomname   '{amp}lt;/span{amp}gt; {amp}lt;span class="statement"{amp}gt;'   value.statename   '{amp}lt;/span{amp}gt;{amp}lt;/li{amp}gt;'); } }); }); } }); $('#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(''); }); }); {amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; . {amp}lt;html{amp}gt; {amp}lt;head{amp}gt; {amp}lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div class="container" style="width:900px;"{amp}gt; {amp}lt;h2 align="center"{amp}gt;JSON Live Data Search using Ajax JQuery{amp}lt;/h2{amp}gt; {amp}lt;h3 align="center"{amp}gt;Employee Data{amp}lt;/h3{amp}gt; {amp}lt;br /{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;div align="center"{amp}gt; {amp}lt;input type="text" name="search" id="search" placeholder="Search Employee Details" class="form-control working" /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;button id="empname" name="empname_li"{amp}gt;Name{amp}lt;/button{amp}gt; {amp}lt;ul class="list-group" id="result"{amp}gt;{amp}lt;/ul{amp}gt; {amp}lt;br /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div id="stage"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;script{amp}gt; $(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('{amp}lt;li class="list-group-item link-class"{amp}gt;{amp}lt;span{amp}gt;'   value.showroomname   '{amp}lt;/span{amp}gt; {amp}lt;span class="statement"{amp}gt;'   value.statename   '{amp}lt;/span{amp}gt;{amp}lt;/li{amp}gt;'); } }); }); } }); $('#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(''); }); }); {amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt;