@thimiraonline, you already are since you use the latest version of Ghost Easybar
@thimiraonline, always read the CHANGELOG to see if it is useful for you. In your case, v1.3.0 is more than fine
Extract:
[1.3.1] - 2020-05-23
Added
- Ability to set inputId to false when no input field is needed.
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!
@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!
Thank you @sashinexists. Happy to read that 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?
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!
In any case, I will release a new version in 2-3 days with that update included.
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.
Hi @gmfmi
I have opened an issue in GitHub for the easybar.
Please make your kind assist in advance.
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
note: if you have heard a project called âghost-easybarâ, know that it actually became SearchinGhostEASY
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. i am one glad ghost blogger.
[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
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 :
- 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.
- 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
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!
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.