JSFiddle - React, Tailwind, and code Playground
by Avinash Singh
HTML
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Search Filter</h2>
<div class="page">
<div class="search-container">
</div>
<div class="data-container"></div>
</div>
<script>
var data =[{"Name":"Avinash",imgUrl:"https://static.boredpanda.com/blog/wp-content/uploads/2017/06/puppy-k-9-police-dogs-taiwan-police-15-5941057b19823__700.jpg",address:"56 Avenue D costa Road AP",finacial:{
"amount":12345
}},{"Name":"Abhilash",imgUrl:"https://static.boredpanda.com/blog/wp-content/uploads/2017/06/puppy-k-9-police-dogs-taiwan-police-8-594105d066f5f__700.jpg",address:"56 Avenue Malwa Road AP"},{"Name":"Himanshu",imgUrl:"https://static.boredpanda.com/blog/wp-content/uploads/2017/06/puppy-k-9-police-dogs-taiwan-police-10-594105d3cebc3__700.jpg",address:"27 Barakhambha Road AP"},{"Name":"Atul",imgUrl:"https://static.boredpanda.com/blog/wp-content/uploads/2017/06/puppy-k-9-police-dogs-taiwan-police-3-594105ca3c95c__700.jpg",address:"27 Barakhambha Road AP"}
]
var url="https://static.boredpanda.com/blog/wp-content/uploads/2017/06/puppy-k-9-police-dogs-taiwan-police-15-5941057b19823__700.jpg";
var searchContainer = document.querySelector('.search-container');
var dataContainer = document.querySelector('.data-container');
function addSearchBar()
{
console.log(searchContainer);
var searchInput = document.createElement('input');
var searchButton = document.createElement('button');
var buttonText = document.createTextNode('Search');
searchInput.placeholder = "Enter text to Search";
//searchButton.onclick=SearchFilter();
searchButton.addEventListener('click', search);
searchButton.appendChild(buttonText);
searchContainer.appendChild(searchInput);
searchContainer.appendChild(searchButton);
searchInput.onkeyup = function() {
var toSearch = searchInput.value;
console.log(searchInput.value);
var searchedArray = data.filter(function(dat){ return recursive(dat,toSearch)});
console.log(searchedArray);
addDataBase(searchedArray);
}
}
function recursive(obj,searchValue)
{
for (var k in...