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

House Frey 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.

To handle this, I created a JavaScript module: SimpleSearchJS. Once you download this module and add it to an HTML page, you can customize the connection in one of 2 ways:

  • insert your specific data-* attributes in the input text field:
    <script type="text/javascript" src="simplesearch.js"></script>
    <input type="text"
    <section id="facets"></section>
    <section id="results"></section>
  • Or, initialize via javascript instead
    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:

Classic UI for Simple Search Service

Early design for our GoT search UI

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.

got theme

got theme

Here’s where I added some sophistication. Instead of using the SimpleSearchJS via data-attributes-*, I took the JavaScript approach to enable the following callbacks:

  • onBefore triggers the transition of the components.
  • onSuccess rearranges 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.

Try It

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.

Join The Discussion

Your email address will not be published. Required fields are marked *