The wait is over! The sixth season of Game of Thrones is in full swing. In preparation for the new season Glynn Bird put together a searchable database of Game of Thrones characters using the Simple Search Service.
Building on his work, I created a custom frontend for the Game of Thrones searchable database. Here, I explain how I created this page, and show how easy it is to spin up your own custom user interface for searching the Seven Kingdoms.
Connect the Frontend
My goal was to create a basic framework to ensure minimal hassle for anyone who wants to create a frontend for their search or attach the service to an existing web page.
First, we need a bridge to connect the web page with the service’s
/search REST API.
- insert your specific
data-*attributes in the
var simplesearch = new SimpleSearch(serviceUrl, callbacks, selectors);
See the module’s readme for more configuration details.
Text passed into this
input tag is used to query the Simple Search Service. Then the responses are parsed, formatted, and inserted onto the web page.
That’s it! You’ve got a fully functioning frontend connected to your search API. There’s a bare-bones example just below. Try running a search for
gender:male AND tyrion or just enter your favorite character.
Run a Simply Styled Search Here:
It does the job, but it still looks pretty bland. Any noble house would insist on a bit more style. We could also add some facets for our data set, so the King’s Hand can ably refine His Grace’s search queries. We’ll look at that next.
Dress It Up
Because SimpleSearchJS handles the gruntwork of making REST API calls and parsing responses, you can focus on designing the user interface.
Settings are available to configure the module for different scenarios. But in most cases, all you need to do at this point is add CSS.
The HTML fragments generated by the module have CSS classes defined throughout for easier styling and theming. The class names are each prefixed with
simplesearch-, so you can quickly access and pick out the elements added by the module.
I tested and put the module through its paces, creating several styles to review colors, layouts, etc. The beginnings of a Simple Search Service theme gallery started to emerge:
The Simple Search Service is Ready for Winter
To design our Game of Thrones frontend, I borrowed some eye-catching imagery, like the bloody Jon Snow HBO was using to promote the new season. After some back and forth, a dark-themed web page emerged which incorporated this image as its background. I added a touch of red to stay within the spirit of the image.
The layout is clean and simple. The header contains a search field and drop-down with some sample queries. A footer shows links to more information, leaving most of the page free to display the output/results from the SimpleSearchJS.
Here’s where I added some sophistication. Instead of using the SimpleSearchJS via
onBeforetriggers the transition of the components.
onSuccessrearranges some DOM elements from the search results.
The page also uses CSS3 animations, which means it works best in the following browser versions or later: Chrome 43, Internet Explorer 10, Firefox 16, Safari 9.
Finally, I added Simple Metrics Collector to the page to track what searches people are performing.
Got an idea or content for a great search page? Fork the Simple Search Service and SimpleSearchJS on GitHub and get designing. It’ll be like putting your petrified dragon eggs in the fire. Whoosh! Power.
In the meantime, our Game of Thrones page is available for easy reference while you watch what unfolds in Season 6.