Question

我有一个搜索栏，其中显示了快递员及其地址的列表，这些地址是从JSON数据文件中加载的。

用户输入邮政编码时，将显示快递员的姓名和地址。

当用户单击名称或地址时，它应该显示开放时间和交付选项。这些数据都在JSON文件中链接在一起。

我的问题是，如何在单击时显示链接到该项目的额外json数据？

当前这是我的Jquery，显示名称和地址

$.ajaxSetup({ cache: false });
 $('#search').keydown(function(){
  $('#result').html('');
  $('#state').val('');
  var searchField = $('#search').val();
  var expression = new RegExp(searchField, "i");
  $.getJSON('https://api.myjson.com/bins/m0a3m', function(data) {

   $.each(data, function(key, value){

    if (value.address.name.search(expression) != -1 || value.address.line1.search(expression) != -1 || value.address.town.search(expression) != -1 || value.address.county.search(expression) != -1 || value.address.postcode.search(expression) != -1)
    {
     $('#result').append('<li class="list-group-item link-class"><div class=""> '+ value.name +' </div><div class=""> '+ value.address.name +'</div><div class=""> '+ value.address.line1 +'</div><div class=""> '+ value.address.town +'</div><div class=""> '+ value.address.county +'</div><div class=""> '+ value.address.postcode +'</div></li>');
    }

   });   
  });
 });

 $('#result').on('click', 'li', function() {
  var click_text = $(this).text().split('|');
  $('#search').val($.trim(click_text[0]));
  $("#result").html('');
 });

Answer 1

嘿，您可以尝试显示单击的列表数据信息。您试图将数据属性设置为列表时间中显示的列表。通过$（this）.data（'title'）;获得click函数的data属性。如果数据匹配，再获取一次数据，然后显示到html或要显示的位置。

<div>
     <input type ="text" id="search" name="search" placeholder="serachcontent" />
</div>
<div id="result">
</div>
<div id="result_open">
</div>

$.ajaxSetup({ cache: false });
	$('#search').keydown(function(){
 	$('#result').html('');
 	$('#state').val('');
	  var searchField = $('#search').val();
	  
  	var expression = new RegExp(searchField, "i");
		var json_data = "";
	$.getJSON('https://api.myjson.com/bins/m0a3m', function(data) {
		json_data = data;
		$.each(data, function(key, value){
		/* 	console.log(value); */
    		if (value.address.name.search(expression) != -1 || value.address.line1.search(expression) != -1 || value.address.town.search(expression) != -1 || value.address.county.search(expression) != -1 || value.address.postcode.search(expression) != -1){
     			$('#result').append('<li class="list-group-item link-class"  data-title="'+value.index+'"><div class=""> '+ value.name +' </div><div class=""> '+ value.address.name +'</div><div class=""> '+ value.address.line1 +'</div><div class=""> '+ value.address.town +'</div><div class=""> '+ value.address.county +'</div><div class=""> '+ value.address.postcode +'</div></li>');
 			}
   		});   
	  });
	 });
	
 	$('#result').on('click', 'li', function() {
		var index = $(this).data('title');
		$.getJSON('https://api.myjson.com/bins/m0a3m', function(data) {
			$.each(data,function(key,value){
				if(value.index == index){
					$("#result_open").html("<br>Address = "+value.address.county+"  "+value.address.line1+""+value.address.postcode+"<br>Opening Times:- <br> MON :"+value.opening_times.Mon+ "<br>Delivery options"+value.delivery_options[0].description+""+value.delivery_options[0].name+"<br>");
				}
			});
		});
		var click_text = $(this).text().split('|');
  		$('#search').val($.trim(click_text[0]));
 		$('#result').html('');
 
	});

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
crossorigin="anonymous"></script> 
<div>
<input type ="text" id="search" name="search" placeholder="serachcontent" />
</div>
<div id="result">
</div>
<div id="result_open">
</div>

根据单击的项目获取JSON数据

1 个答案: