-
-
Save lisawebcoder/dab81edc5f4ac94a9988ca66daa60c91 to your computer and use it in GitHub Desktop.
Complete code listing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Search a List</title> | |
<style> | |
body { | |
font-family: Arial, Helvetica, sans-serif; | |
} | |
ul { | |
list-style: none; | |
} | |
li { | |
padding: 10px 0; | |
line-height: 1.2rem; | |
} | |
</style> | |
</head> | |
<body> | |
<form id="search-books"> | |
<label for="search">Search:</label> | |
<input type="text" name="search" id="search"> | |
<button name="search_btn">Search</button> | |
<button name="reset" type="reset">Reset</button> | |
</form> | |
<div id="app"></div> | |
</body> | |
<script> | |
var books = [ | |
{ | |
"title": "Cracking the coding interview", | |
"subtitle":"189 programming questions and solutions", | |
"author":"Gayle Laakmann McDowell", | |
"category":"Programming", | |
"publisher":"CareerCup, LLC" | |
}, | |
{ | |
"title": "No friend but the mountains", | |
"subtitle":"Writing from manu prison", | |
"author":"Behrouz Boochani", | |
"category":"Literature", | |
"publisher":"Pan Macmillan Australia" | |
}, | |
{ | |
"title": "Indian Harvest", | |
"subtitle":"Classic and contemporary vegetarian dishes", | |
"author":"Vikas Khanna", | |
"category":"Cuisine", | |
"publisher":"Bloomsbury USA" | |
}, | |
{ | |
"title": "Upheaval", | |
"subtitle":"Turning points for nations in crisis", | |
"author":"Jared Diamond", | |
"category":"Politics", | |
"publisher":"Little, Brown & Company" | |
}, | |
{ | |
"title": "Algorithms", | |
"subtitle":"Fourth Edition", | |
"author":"Robert Sedgewick, Kevin Wayne", | |
"category":"Programming", | |
"publisher":"Addison Wesley" | |
}, | |
{ | |
"title": "How We Die", | |
"subtitle":"Reflections on Life's Final Chapter", | |
"author":"Sherwin B. Nuland", | |
"category":"Literature", | |
"publisher":"Vintage" | |
}, | |
{ | |
"title": "The Circle", | |
"subtitle":"", | |
"author":"Dave Eggers", | |
"category":"Fiction", | |
"publisher":"Vintage" | |
}, | |
{ | |
"title": "The Algorithm Design Manual", | |
"subtitle":"", | |
"author":"Steven S. Skiena", | |
"category":"Programming", | |
"publisher":"Springer" | |
}, | |
{ | |
"title": "I Contain Multitudes", | |
"subtitle":"The microbes within us and a grander view of life", | |
"author":"Ed Yong", | |
"category":"Science", | |
"publisher":"HarperCollins" | |
}, | |
{ | |
"title": "The Silkwarm", | |
"subtitle":"A Cormoran Strike Novel", | |
"author":"Robert Galbraith", | |
"category":"Literature", | |
"publisher":"Mulholland Books" | |
}, | |
{ | |
"title": "Cosmos", | |
"subtitle":"", | |
"author":"Carl Sagan", | |
"category":"Science", | |
"publisher":"Ballantine Books" | |
}, | |
{ | |
"title": "Comanche Moon", | |
"subtitle":"", | |
"author":"Larry McMurtry", | |
"category":"Science", | |
"publisher":"Simon & Schuster" | |
}, | |
{ | |
"title": "Nine Pints", | |
"subtitle":"A journey through the money, medicine, and mysteries of blook", | |
"author":"Rose George", | |
"category":"Science", | |
"publisher":"Metropolitan books" | |
}, | |
] | |
var render = function(data) { | |
var app = document.getElementById('app'); | |
var booksHTMLString = '<ul>'+ | |
data.map(function(book){ | |
return '<li>'+ | |
'<strong>Title: </strong>' + book.title + '<br/>' + | |
'<strong>Subtitle: </strong>' + book.subtitle + '<br/>' + | |
'<strong>Author: </strong>' + book.author + '<br/>' + | |
'<strong>Category: </strong>' + book.category + '<br/>' + | |
'<strong>Publisher: </strong>' + book.publisher + '<br/>' + | |
'</li>'; | |
}).join(''); | |
+ '</ul>'; | |
app.innerHTML = booksHTMLString; | |
} | |
render(books); | |
var handleSearch = function(event) { | |
event.preventDefault(); | |
// Get the search terms from the input field | |
var searchTerm = event.target.elements['search'].value; | |
// Tokenize the search terms and remove empty spaces | |
var tokens = searchTerm | |
.toLowerCase() | |
.split(' ') | |
.filter(function(token){ | |
return token.trim() !== ''; | |
}); | |
if(tokens.length) { | |
// Create a regular expression of all the search terms | |
var searchTermRegex = new RegExp(tokens.join('|'), 'gim'); | |
var filteredList = books.filter(function(book){ | |
// Create a string of all object values | |
var bookString = ''; | |
for(var key in book) { | |
if(book.hasOwnProperty(key) && book[key] !== '') { | |
bookString += book[key].toString().toLowerCase().trim() + ' '; | |
} | |
} | |
// Return book objects where a match with the search regex if found | |
return bookString.match(searchTermRegex); | |
}); | |
// Render the search results | |
render(filteredList); | |
} | |
}; | |
document.addEventListener('submit', handleSearch); | |
document.addEventListener('reset', function(event){ | |
event.preventDefault(); | |
render(books); | |
}) | |
</script> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment