How To Add Search To Ghost Editor

Editing on the Ghost platform has proven to be a pleasant experience for me, save for the lack of a built-in search functionality. Fortunately, Jamal Neufeld has shared great search engine he created that uses your RSS feed to quickly search through your posts without an option to put a search bar in your theme and have that redirect to a separate search page that's already populated with the results.

To get that you are going to have to take the following instructions.

You are going to need:

1. Jamal Neufeld's GhostHunter.
   Download the ghostHunter file and not the ghostHunter.min file, and add the files to your theme.

2. jQuery.
   Download it and add the file into the js folder in your theme.

3. A custom JavaScript file

4.A dedicated search results page.

Step 1

Add the following scripts to your default.hsb file:

<script type="text/javascript" src="{{asset "js/application.js"}}"></script>

<script type="text/javascript" src="{{asset "js/jquery.ghostHunter.js"}}"></script>

Step 2

Create a new static page from your account with a title of "Search" and take note of the URL to use later.

Create a new page.hbs file called page-your_slug.hbs
(here, replace slug with the extension in your URL).

Step 3

In your page-search.hbs, delete the little post-content section and replace it with the following:

`

`

`

`

The search field is there for typing in and searching, while the results section is where the results show up.

Step 4

We are then going to configure GhostHunter. Go back to your default.hbs, and where all your scripts are, add this:

<script> $("#search-field").ghostHunter({ rss : "{{@blog.url}}/rss/", results : "#results", onKeyUp : true, }); </script>
We need onKeyUp to be true for this to work.

Step 5

Now, put a search form somewhere on your site. Since I have a navigation menu, I went to my navigation.hbs and put it there. Give it any id you want, but make it unique. Example:

`

`

Step 6

Open your application.js file and add the following solution to it:

$(document).ready(function() { // Save search term $("#nav-search").keydown(function(e) { if(e.which == 13) { var searchVal = $('#nav-search').val(); sessionStorage.setItem("searchVal", searchVal); } }); $('#search-field').val(sessionStorage.getItem("searchVal")); });

The first function activates if a key is down on the nav-search item, then save the value inside of the nav-search input inside local storage. This value is deleted when the session ends. After it's stored, the second call finds the search-field input on the page and gives it the stored value.

Step 7

Now, we are going to call the keyup function on search-field by actually modifying GhostHunter slightly, considering ghostHunter.js is much easier to read than ghostHunter.min.js.

Open up ghostHunter.js, find the loadRSS function, then find the $.get function inside of that, and at the very end of that, add:
$('#search-field').keyup();

Here's how it should look afterwards:

` index.add(parsedData);
blogData.push(parsedData);
};
$('#search-field').keyup();

// the line you are going to add

After that, Start up your site, and test out your new search input. You might notice that it can be a bit slow to populate the search results at times.