Add Search to Ghost using Twitter Typeahead.js


Using Ghost's public API, you can integrate Twitter's typeahead.js to create a great and customizable search on your Ghost blog. I think this is currently the best free way to have search on your blog.

Note: There is a chance this may affect performance on huge blogs because it stores all the posts in a variable, but testing on a blog with over a hundred posts, there wasn't any slow down what so ever.

  1. Figure out where in your theme you want your search input and add the following:

    <div id="site-search" style="display:none;">
        <input class="typeahead" type="text" placeholder="Search">
    </div>
    
  2. Include the typeahead/bloodhound bundle to your theme (probably default.hbs since you probably want this on every page of your site)

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
    
  3. Now what you want to do is use $.get and Ghost's public API to go grab all the posts, then add it into a local variable

    $.get(ghost.url.api('posts', {limit: "all", fields: "slug,title"})).done(function(data) {
        var searchData = data.posts; //add all the data to a variable
    });
    
  4. Now that we have all the data in searchData, we need to shove it into bloodhound and typeahead.js (they have a lot of examples and docs here). Here is the entire code:

  5. You can see, we go get all the posts, then add that data to the searchData variable, then create a bloodhound instance using searchData as the local data. After that, we build the typeahead pointing it to the bloodhound instance to perform all the searching.

    Here is what it looks like on Casper (with no styling)

    Typeahead.js in Casper

Good luck and leave a comment if you have any trouble or questions!

3. Now what you want to do is use `$.get` and Ghost's public API to go grab all the posts, then add it into a local variable $.get(ghost.url.api('posts', {limit: "all", fields: "slug,title"})).done(function(data) { var searchData = data.posts; //add all the data to a variable }); 4. Now that we have all the data in searchData, we need to shove it into bloodhound and typeahead.js ([they have a lot of examples and docs here](https://twitter.github.io/typeahead.js/examples/)). Here is the entire code: 5. You can see, we go get all the posts, then add that data to the `searchData` variable, then create a bloodhound instance using `searchData` as the local data. After that, we build the typeahead pointing it to the bloodhound instance to perform all the searching. Here is what it looks like on Casper (with no styling) ![Typeahead.js in Casper](/content/images/2016/03/Typeaheadjs.jpg) Good luck and leave a comment if you have any trouble or questions!