JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div id="results">sample</div>
<input id = "search">
JavaScript
var sampleJson = [{
"first_name": "Barbara",
"last_name": "Adams",
"Picture": "robohash.org/…; ",
"phone": "7 - (263) 660 - 4073 ",
"address": "878 Schurz Hill "
}, {
"first_name": "Ashley",
"last_name": "Bowman",
"Picture": "robohash.org",
"phone": "1 - (512) 301 - 8791 ",
"address": "54 Ruskin Point "
}];
function filterAddress(filterResult) {
output = '';
$.each(filterResult, function(key, val) {
console.log(val)
output += '<div>';
output += '<h5>' + val.first_name + " " + val.last_name +'</h5>';
output += '<h4>' + '</h4>'
output += '</div>';
});
console.log(output)
output += '</div>';
$('#results').html(output);
}
$(document).load(function(){
$('#search').on('change', function(e){
filterAddress(executeSearch($('#search').val()));
});
});
function executeSearch(queryStr){
var pattern = new RegExp('^' + queryStr, 'i');
var results = [];
$.each(sampleJson, function(key, val){
if(pattern.test(val.first_name)){
results.push(val);
}
});
return results;
}