//=============================================//
// LET'S PRETEND YOU GOT THIS ARRAY OF DATA //
//=============================================//
var apiResponse = [
{
title: "Jurassic World",
poster: "http://cache2.allpostersimages.com/p/MED/89/8938/CKAR300Z/posters/jurassic-world-mosa-one-sheet.jpg",
year: "2015",
summary: "A new theme park is built on the original site of Jurassic Park. Everything is going well until the park's newest attraction--a genetically modified giant stealth killing machine--escapes containment and goes on a killing spree."
},
{
title: "The Godfather: Part I",
poster: "http://cache2.allpostersimages.com/p/MED/16/1654/CZJGD00Z/posters/the-godfather.jpg",
year: "1972",
summary: "The aging patriarch of an organized crime dynasty transfers control of his clandestine empire to his reluctant son."
},
{
title: "Big Hero 6",
poster: "http://cache2.allpostersimages.com/p/MED/86/8666/RJ1U300Z/posters/big-hero-6-rate-your-pain.jpg",
year: "2014",
summary: "The special bond that develops between plus-sized inflatable robot Baymax, and prodigy Hiro Hamada, who team up with a group of friends to form a band of high-tech heroes."
},
{
title: "Man of Steel",
poster: "http://cache2.allpostersimages.com/p/MED/69/6988/2BBW100Z/posters/man-of-steel-flying-movie-poster.jpg",
year: "2013",
summary: "Clark Kent, one of the last of an extinguished race disguised as an unremarkable human, is forced to reveal his identity when Earth is invaded by an army of survivors who threaten to bring the planet to the brink of destruction."
},
{
title: "Quantum of Solace",
poster: "http://cache2.allpostersimages.com/p/MED/62/6255/4XS3100Z/posters/james-bond-quantum-of-solace-movie-poster-print.jpg",
year: "2008",
summary: "James Bond descends into mystery as he tries to stop a mysterious organization from eliminating a country's most valuable resource. All the while, he still tries to seek revenge over the death of his love."
},
];
//=============================================//
// YOU INITIALIZE THE MODULE THIS WAY //
//=============================================//
var renderResults = new LiveSearch({
// The searchbox used to filter results
searchBox: document.getElementById("search"),
// The place where you'll render them
results: document.getElementById("results"),
// The array of data to filter through
sourceList: apiResponse,
// If your data is not a pure string
fixCriteria: function(source){
return source.title;
}, // End of changing criteria to movie title
// The HTML enclosing your results
template: function(movie) {
return "<div class='col-sm-6 col-md-4'>"+
"<div class='thumbnail'>"+
"<img src='"+movie.poster+"' alt='poster'>"+
"<div class='caption'>"+
"<h3>"+movie.title+" ("+movie.year+")</h3>"+
"<p>"+movie.summary+"</p>"+
"</div><!-- End of caption -->"+
"</div><!-- End of thumb -->"+
"</div><!-- End of box -->";
}, // End of template
// If you don't want to show all results upon empty searchbox
preventEmptyInput: true
}); // End of constructed module
//=============================================//
// THIS IS THE MODULE THAT MAKES IT WORK //
//=============================================//
function LiveSearch(settings) {
var showResults = function(){
var criteria = new RegExp(this.value, "i"), searched;
settings.results.innerHTML = "";
if (this.value !== "" || !settings.preventEmptyInput) {
settings.sourceList.forEach(function(listItem){
searched = (settings.fixCriteria) ? settings.fixCriteria(listItem) : listItem;
if (criteria.test(searched)) {
settings.results.innerHTML += settings.template(listItem);
} // End of filtering list items
}); // End of iterating the list items
} // End of preventing empty input
}; // End of callback function
this.init = function() {
settings.searchBox.addEventListener("keyup", showResults);
}; // End of initializer
this.stop = function() {
settings.searchBox.removeEventListener("keyup", showResults);
}; // End of event destroyer
} // End of Autocomplete constructor
//=============================================//
// AND THE HTML WOULD LOOK LIKE THIS //
//=============================================//
/*
<!-- Using Twitter Bootstrap -->
<!-- Linking to a file with the above code -->
<div class="container-fluid">
<h1>Search here:</h1>
<input type="text" id="search">
<h1>Results:</h1>
<div class="row" id="results">
<!-- Render here -->
</ul>
</div>
*/
renderResults.init();
An easy way to do live search results with vanilla javascript.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.