Having search functionality can be a really useful for viewers in order to find content on your site. In this post we are going to explore the currently available options for adding search functionality to your Ghost blog theme.

Native search

Starting with Ghost v5.3.0 a native search function was added to Ghost.

This was one of the most requested features and now you can easily add a built-in native search function to any Ghost theme. You can two it in two ways:

1. Add a navigation link pointing to #/search.
2. Adding the data-ghost-search attribute to any element in your Ghost theme.

Both options will result in the same thing, when clicking the element it will open the search popup. The advantage of the native search is that it's easy to set up, basically it doesn't require coding knowledge.

Fuse.js

Fuse.js is a powerful, lightweight fuzzy-search library, with zero dependencies.

The advantage of Fuse.js is that you don’t need to set up a dedicated backend just for the search function. Another advantage is its simplicity and performance. This is the library we use in our latest Ghost Themes.

Requirements:

• Ghost Content API
• a Custom Integration
• an input field for the search

Basic options:

• isCaseSensitive - indicates whether comparisons should be case sensitive.
• includeScore - whether the score should be included in the result set.
• includeMatches - whether the matches should be included in the result set
• minMatchCharLength - only the matches whose length exceeds this value will be returned.
• shouldSort - whether to sort the result list, by score.
• findAllMatches - when true, the matching function will continue to the end of a search pattern even if a perfect match has already been located in the string.
• keys - list of keys that will be searched.s

Ghost Search

A simple but powerful search library for Ghost, available on GitHub this package is compatible with Ghost 3.0.

It uses fuzzysort under the hood.

Requirements:

• Ghost Content API
• an input field for the search
• initializing the ghost-search library
• setup a Custom Integration in Ghost Admin

Options:

• url - your custom integration(site) url
• key - your custom integration content api key
• version - by default v3 for Ghost 3.0
• input - the id of the input field
• results - the id of the element where the results should appear
• button - the id of the element to trigger the search, by default it's empty as the search is performed while you type
• defaultValue - you can set a default value for the input
• template - the template used to render the search result
• trigger - can be focus (load data when the input is in focus) or load (load data on page load)
• options - other options from the fuzzysort library
• api - refers to the Ghost Content API
• on - there are four events available here: beforeDisplay, afterDisplay, beforeFetch and afterFetch.

As you can see, there are quite a lot of options to customize how the search will work. The great thing about this library is that the whole script in minified version is under 12KB.

This is the plugin we use in some our Ghost Themes.

Ghost Finder

This one works somewhat similar to the first library, also available on GitHub.

Requirements:

• add the script to your theme
• add the input element for search
• create an instance of the search
• setup a Custom Integration in Ghost Admin

Options:

• input - the search input
• showResult - the element where the search results will be placed
• homeUrl - your site url
• contentApiKey - the content api key from the custom integration
• resultTemplate - the template for the results
• singleResultTemplate - the template for a single result
• excerpt_length - the length of the excerpt (number)
• time_format - the format string for the date 'MMM Do YYYY'

Available variables to use within the result template:

• ##title - Post title
• ##url - Post url
• ##primary_tag_name - Name of primary tag
• ##primary_tag_url - Url of primary tag
• ##primary_author_name - Name of primary author
• ##primary_author_url - Profile url of primary author
• ##primary_author_avatar - Profile photo of primary author
• ##excerpt - show some words of the post content. Default words count is 15
• ##published_at - Post publication date. Format can be change by time_format option
• ##feature_image - Post featured image url
• ##resultCount - Matched result count

Compared to Ghost Search we have somewhat less options.

Ghost Hunter

GhostHunter was the first search plugin created for Ghost. The major drawback is that it uses jQuery which would bloat the script size you would add to your site, thus affecting the performance.

Requirements:

• add the script to your theme
• setup a Custom Integration in Ghost Admin

Options:

• results - the JQuery ID of the element into which search results should be inserted
• onKeyUp - for instant search-as-you-type set the value true
• result_template - the handlebars template used to render the results
• info_template - to display the number of search items found
• displaySearchInfo - to display the info_template
• subpath - to set the site to a sub folder like "/blog"
• onPageLoad - should the indexing happen on page load
• before - event before the result list is shown
• onComplete - event after the results are displayed

GhostHunter was developed before Ghost 1.0 and many things have changed within Ghost since then, the other plugins seem to be a better option right now.

Site Search 360

Site Search 360 is an another way to add search to your Ghost site.

Requirements:

• add the search code to the theme
• create a search page and style it

There is a tutorial by the Ghost Team how you can integrate it into your Ghost Theme.

The main advantage of using a tool like Site Search 360 is that you’ll be able to monitor usage. You can see how often people are using the search and what they are searching for so you can improve the navigation experience.

Let us know if you found another option to add search to your Ghost theme.