How to Add Search to Ghost Using GhostHunter

In this tutorial I'll show you how to add seach functionality to your Ghost theme using GhostHunter.

First, you need to make sure that you have Public API checked in your Ghost dashboard. To activate go to your Ghost admin -> Labs -> Public API.

You need to include GhostHunter script in your theme. If you use jQuery in your theme include jquery.ghostHunter.min.js, if you don't use it simply include jquery.ghostHunter-nodependency.min.js. All the examples in this tutorial will cover the jQuery version.

In your Ghost theme you'll need an input to attach the search to:

<form>
    <input id="search-field" placeholder="Search" autocomplete="off">
    <input type="submit" value="search">
</form>

Then, you need to add a section to display the results:

<section id="results"></section>

Last step is to initialize GhostHunter:

$("#search-field").ghostHunter({
    results: "#results"
});

GhostHunter options

GhostHunter has some options to change it's default state. Here they are:

onPageLoad

By default GhostHunter starts searching through your posts when the input recives focus. That means that it is generally triggered when the user clicks or taps the input. If we set onPageLoad to true, GhostHunter will build you query when the page loads if the field is automatically in focus.

$("#search-field").ghostHunter({
    results     : "#results",
    onPageLoad  : true
});

onKeyUp

By default onKeyUp is set to false. If we set this property to true we are telling users to quickly find and select from a pre-populated list of values as they type.

$("#search-field").ghostHunter({
    results  : "#results",
    onKeyUp  : true
});

result_template

By default result_template is set to:

"<a href='{{link}}'><p><h2>{{title}}</h2><h4>{{prettyPubDate}}</h4></p></a>"

At this moment there is a small bug with {{prettyPubDate}}. To show the date simply replace prettyPubDate with pubDate.
You can change this template to fit your needs.

$("#search-field").ghostHunter({
    results             : "#results",
    result_template     : "<a href='{{link}}'><p><h2>{{title}}<br>{{tag}}</h2><h4>{{pubDate}}</h4></p></a>",
});

info_template

By default info_template is set to:

"<p>Number of posts found: {{amount}}</p>"

This adds a paragraph in your results that shows the total number of posts found. You can modify the text as you wish.

$("#search-field").ghostHunter({
    results           : "#results",
    info_template     : "<p>Posts found: {{amount}}</p>",
});

displaySearchInfo

By default displaySearchInfo is set to true. You can hide the search info by setting this value to false.

$("#search-field").ghostHunter({
    results           : "#results",
    displaySearchInfo : false
});

zeroResultsInfo

By default zeroResultsInfo is set to true. You can hide the search info, when there are no posts found, by setting this value to false.

$("#search-field").ghostHunter({
    results           : "#results",
    zeroResultsInfo   : false
});

before

before is a callback function that is called right before GhostHunter renders the information onto the page.

$("#search-field").ghostHunter({
    results         : "#results",
    before: function() {
        console.log('Results are about to be rendered');
    }
});

onComplete

onComplete is a callback function that is called right after GhostHunter renders the information onto the page.
For example, let's show maximum 10 posts.

$("#search-field").ghostHunter({
    results         : "#results",
    onComplete      : function( results ){
        $('#results a').each(function(index, el) {
            if (index > 9) {
                $(this).remove();
            };
        });
    }
});

includepages

By default includepages is set to false. You can include static pages by setting this value to true.

$("#search-field").ghostHunter({
    results         : "#results",
    includepages    : true
});

We will, probably, have more options in the future like include excerpt, limit, author and more.