基本上,我有一些jQuery,它从JSON文件中提取数据。
目前还可以,但是可以复制数据。
例如,如果我输入“ NG8 6PL”,它将两次显示相同的地址。
这是我的代码。
$('#search').keyup(function() {
$('#result').html('');
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>');
$('#result2').append('<li class="list-group-item link-class"><div class=""> ' + value.location.latitude + ' </div><div class=""> ' + value.location.longitude + ' </div><li>');
}
});
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input type="text" id="search">
<div class="row">
<div class="col-sm-6">
<ul id="result" class="list-unstyled"></ul>
</div>
<div class="col-sm-6">
<ul id="result2" class="list-unstyled"></ul>
</div>
</div>