Ghost-search: Our First Open Source Library for Ghost

Marketplace
1

Hi guys,

A month ago I decided to work on something that everybody can benefit from. So I started an open source library called ghost-search. After some work I’m proud to announce that I finally have a version that can be used.

Why I started this library?
As you probably know, there is already a search library for Ghost: ghostHunter. The library is good, it does its job, but I always felt that you could do a lot more with a search. Especially now with Dynamic Routing. With ghost-search you can search through posts, tags, users, custom collections, use filters, specify which fields to retrieve and more.

Read more here if you want to know how to setup and customize ghost-search.

The library can be used with/without jQuery.
It’s using fuzzysort as a search algorithm.
Has only 13kb in production.

Let me know what you think.

If you have any questions or suggestions feel free to write in here.

25 Likes
2

Thank you @HauntedThemes for sharing it with the community. I would love to use it and contribute to the project. :+1:

1 Like
3

Awesome! Thank you for sharing @HauntedThemes. How does ghost-search work with other languages?

1 Like
4

I’ve tested with chinese, russian and an arabic language. I didn’t had a problem.

3 Likes
5

Thank you @HauntedThemes :+1: :clap:

6

Really thanks.
But does it support non-latin charactors like japanese or korean or chinese?
Right now ghosthunter only support japanese, please do better, thanks in advance.

7

This is great! Thanks a lot! :tada:

8

Hi, good work, it works well. Is it possible to obtain other information in the search result, such as the description and the img of the article as well as the title and the slug? Thank you

EDIT:
Great job boy.

I love this script.

I was able to filter also description and image, it is very simple.

This script is much faster than ghosthunter.

Thanks again

EDIT 2:

There is only one problem

The title of my article is for example: “how to install java”
Input: install java -> found 1
but
Input: java install -> found 0

is it possible to solve this problem?

9

The library uses fuzzysort as an algorithm for searching. So you might want to take a look at it. In ghost-search library, modify the threshold value to something lower. Check default options to see how to set it. Try -10000 and see what you get.

10

Thanks for the reply.
Apparently -3500 or -10000 or -100000 does not change anything

11

Am I doing something wrong ?

12

I looked at your docs. I’m very impressed!

13

We’ve updated our open source search library to be compatible with Ghost’s Content API. Check it out:

5 Likes
14

After a long search I finally found this ghost-search…
Thanks for the good job.

15

i want to make production build but got error of ghost api key is invalid…
plz help me out as my project deadline is goin to end soon !!!

16

Thank you for sharing your views.

17

Hello all :wave:

Ghost Search Migrated to Ghost V3

Download the JS File Directly put this on your theme assets JS Folder: https://raw.githubusercontent.com/mskian/ghost-search/master/dist/ghost-search.min.js

<script src="{{asset "js/ghost-search.min.js"}}"></script>
  • Waiting for Author’s review to Merge the Pull request on Official repository
18

Thanks. Merged.

1 Like
19

How to Install and use the Ghost search on your Ghost site?

  • login to your Ghost site
  • Create a New Page for Search
  • Next in the Post Editor Sidebar, you can find the Code injection
  • in Page Footer box Add the ghost-search library and initialize it
<script src="https://unpkg.com/@tryghost/content-api@1.3.4/umd/content-api.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ghost-search@1.1.0/dist/ghost-search.min.js" integrity="sha256-yNPbNNfIwEJkDLzw2jUIQwqvwqjDIgc9rupcm4uqFqI=" crossorigin="anonymous"></script>
<script>
let ghostSearch = new GhostSearch({
    key: '22444f78447824223cefc48062', // This is just a demo key. Replace the key with a real one. See Step 3.
    url: 'https://demo.ghost.io', // This is just a demo host. Replace the demo url with a real one. See Step 3.
    input: '#my-custom-input',
    results: '#my-custom-results',
    options: {
        keys: [
            'title',
            'plaintext'
        ],
    },
    on: {
        afterDisplay: function(results) {
            if (results.total == 0 && document.getElementById('my-custom-input').value != '') {
                let resultsElement = document.getElementById('my-custom-results');
                let e = document.createElement('p');
                resultsElement.setAttribute("style", "text-align:center;");
                e.innerHTML = 'No Search results';
                resultsElement.appendChild(e.firstChild);
            };
        }
    },
    api: {
        resource: 'posts',
        parameters: {
            fields: ['title', 'slug', 'plaintext'],
            formats: 'plaintext',
        },
    },
    template: function(result) {
        let url = [location.protocol, '//', location.host].join('');
        return '<ul><li><a href="' + url + '/' + result.slug + '/' + '">' + result.title + '</a></li></ul>';
    }
})
</script>

Note:

  • Replace the Default Key and URL with your’s
  • That’s all successfully we installed :100:

Example

  • Add this below HTML code on the HTML Block
<input id="my-custom-input" type="text">
<div id="my-custom-results"></div>
  • Save the page & test the search :face_with_monocle:

For more Example :blush:

2 Likes
20

Must I replace the „my-custom-Input“ ? Sorry I’m new to Ghost. Or only put this in an Page?