SearchinGhost - the new search plugin competitor

@thimiraonline, you already are since you use the latest version of Ghost Easybar :wink:

1 Like

I think I’m on 1.3.0.

@thimiraonline, always read the CHANGELOG to see if it is useful for you. In your case, v1.3.0 is more than fine :wink:

Extract:

[1.3.1] - 2020-05-23

Added

  • Ability to set inputId to false when no input field is needed.
1 Like

Thank you for making this, it works perfectly and it is blazing fast. My website has not had search ever working so smoothly and so functionally. Before it wouldn’t search by content or tag, and if you typed like ten characters it would crash. Now it’s seamless!

1 Like

@gmfmi Thanks for sharing your work! I’ve checked it out and replaced our previous implementation of Ghosthunter. My reason for searching is that it was more easily modified to also search for tags, author, and post body. Ghosthunter allowed searching of post body out of the box but it was too slow (at least with our content). SearchinGhost allows searching of post body but quickly.

If I can provide one piece of feedback, it’d be nice if we could skip childOutputType and append the results of the template function without getting wrapped in an element. If that’s already a possibility and I misunderstood the docs sorry for my mistake.

Great job, pretty happy so far!

1 Like

Thank you @sashinexists. Happy to read that :slightly_smiling_face: I took a look at your blog and I have a few tips to make improvements (you will receive that in a private message).

Hi @ijongkim, thanks for the feedback! For now, it is not possible to skip childOutputType. Could you give me more context about it, I don’t understand why would you not use a wrapper element? You want to put all the results next to each other without any structure? For what particuliar reason would you do that?

1 Like

I don’t understand why would you not use a wrapper element? You want to put all the results next to each other without any structure? For what particuliar reason would you do that?

It’s simply not necessary to have individually wrapped items, that’s all. Here’s a screenshot of the DOM structure:

The results render inside div#results so the additional li tag is unnecessary. It’s not a deal breaker for me as the additional li tag doesn’t break anything but it might break things for others and may also make implementation into an existing site easier to be able to skip childOutputType.

It would also be a fairly easy fix as well to allow null value to indicate skipping the rendering of a wrapper element. Looking at your current source code though, I can see why the wrapping element is a requirement.

One solution is to check for childOutputType inside of display() and calling a different function if childOutputType === null. This alternate function would take the returned value from this.config.template and append it to the output element using insertAdjacentHTML.

Happy to submit a PR if that’s easier.

OK, I got the point. In your case, the anchors are also the wrapping elements.

If you want to, I will accept a PR with pleasure. Also, take into account that:

  • do not forget the empty template case
  • the config value to disable childElement is ‘false’

If you need more guide lines, send me a private message or create a GitHub issue. Happy coding! :grinning:

In any case, I will release a new version in 2-3 days with that update included.

@gmfmi

I’ve created an issue and proposed two approaches. One would be appending the strings provided by the template and emptyTemplate functions using insertAdjacentHTML as discussed above.

The other is to expect the template and emptyTemplate to return proper Elements and those could be inserted using appendChild.

The benefit of the first approach is that users won’t have to refactor their template or emptyTemplate functions to take advantage of this option.

The benefit of the second approach is that it requires only a single check in evaluateTemplate() and the rest of your code in display() can remain as is.

GH Issue can be found here

Hi @gmfmi

I have opened an issue in GitHub for the easybar.

Issue No 2

Please make your kind assist in advance.

1 Like

To everyone,

I just released a new project called SearchinGhostEASY which is based on SeachinGhost and makes using it really (really) easy. Basically, it is some pre-made search bar templates put together with SearchinGhost in an html iframe that loads automatically from a CDN.

So if you liked SearchinGhost but you did not want to create your own search bar design or if you do not want to spend to time implementing it by yourself, SearchinGhostEASY might be a great solution :smiley:

note: if you have heard a project called “ghost-easybar”, know that it actually became SearchinGhostEASY

1 Like

hey everyone just wanted to do a quick review of the search bar @gmfmi created. the search works so fast & efficiently for blog with hundreds (and even thousands) of posts.:heart_eyes: i am one glad ghost blogger.

1 Like

[UPDATE] For JS framework users

Based on this comment, I decided to update SearchinGhost to make it more “framework-friendly”.

So if you are using React, Vuejs, Angular or any other JS framwork, you might be interested with the v1.4.0. Now, you will be able to use SearchinGhost purely as a search library without any DOM manipulation involved.

Basically, running a search query is as simple as:

var query = "the query text";
var postsFound = searchinGhost.search(query);

// Where 'postsFound' content looks like:
[
  {
    "title": "A Full and Comprehensive Style Test",
    "published_at": "Sep 1, 2012",
    [...]
  },
  {
    "title": "Publishing options",
    "published_at": "Aug 20, 2018",
    [...]
  }
]

To learn more about it, see the README section. Plus, if you start using it this way, let me know if other improvements could be useful :slight_smile:

I’ve tested this plugin on my custom theme and it works as promised! Thank you for sharing and for choosing a JS only approach.

Question: How would I customize the styling of the modal or results page? I’d like to make it match the brand of the rest of the site so I’d need to do a full customization. I see that you have some out-of-the-box options, but I need to build something completely different.

Thank you!

Hi @ks_dev

Just to be clear, there is 2 completely different projects :

  1. SearchinGhost (the current topic and this github): It is a pure JS search engine, there is no modal, no theme. It is just a simple JS lib to help you build your own theme.
  2. SearchinGhostEASY (this topic and that github): based on the previous one, it aims to be super easy to install for any non-IT person. Basically, the “EASY” version is just one implementation of the library.

So, I think your question refer to the “EASY” version. If that is the case, you probably want to try the original one. Maybe I misunderstood your question, if so, please send me a DM :)

Hi @gmfmi, I’m using your plugin for my blog which was created with React as a front end. I have a problem with the configuration:

How can I implement the link of the post in “React way”? Because if I config the link with a tag and href is post.url, my posts will be navigated to original URL, not the “React way”, like that:

https://abc.com/posts/6180d64ebcc2b92eee01ec8d

Sorry for my poor English because I am not a native English speaker. Hope you understand my words and respond to me soon. Thanks in advance.

Hi @laurel!

No need to apology for you english, I am not an native speaker myself :slight_smile:

If you want to use SearchinGhost within a React app, you cannot use it with the “default” way. The biggest issue is both vanilla JS and React app will manipulate the DOM at the same time.

Basically, you want to use SearchinGhost as a “service” that never interact with the DOM. To do so, please check the “JS framework” section at the end of the documentation : GitHub - gmfmi/searchinGhost: A pure javascript, lightweight & in-browser full-text search plugin for Ghost (blog).

Hope it will be clear enough, send me a PM if it is not.

@gmfmi I read the documentation and tried again. Finally, it worked. Thank you for your answer and your amazing plugin. I really appreciate it! :love_letter: :100:

1 Like

Hey @gmfmi , The search library is nice and I am looking forward to use it in my projects. But I have a question, Is it possible to use keyboard navigation (up and down arrows) to hover the search results? And if a result is hovered, the keyboard arrows should start from it, and not from the start. Framer, though not a ghost website, has that kind of implementation. It is good for accessibility and user experience.
Also, the Suggestions section, before searching, and on searching, the innerHtml changes to the results, I guess, it might be nice.
If it is possible, please give a hint/process to implement it with SearchinGhost.
Thanks!

Hi @andy01

What you are trying to achieve is 100% doable with SearchinGhost. To make things clear, SearchinGhost will NOT handle the way results are displayed (i.e. format, styling, or navigation). It only does one thing: taking input from a search bar and putting the corresponding results as <li> in a <ul> list.

So now, you will need to create/update the HTML/CSS/JS file to get what you are looking for. If you were looking for an already existing solution, sorry to tell you that but, I don’t think it exists. I will need to build it for your custom needs.

I hope it was clear enough, reach me out if not.