How to use handlebars for search bar in casper theme

Hi, I am trying to add a search bar in my casper theme but I want to use handlebars for that. I have done it using simple html which is not sufficient.
I am trying to create a search bar like lybrate(https://www.lybrate.com/) have.

I am using latest version of ghost.
Browser is mozilla firefox.

I can provide additional information if anyone wants.Please help.
Here is a screenshot of the search bar I have created:-
oie_iaNdxLe4jVtU

I want to know how can I use use {{#each}} or {{#foreach}} loop for the json data.

Hey @Prateek_kumar :wave:
Will you be using client-side JavaScript to add the functionality? You’ll probably want to create a custom partial that loops through all your content to create the JSON object. The #get helper would be good for this, there’s more info in our docs:

Alongside #get you can use #foreach to loop through the items and output a clean JSON object for you to work with:

Hope this helps. Let us know if you have more questions :blush:

1 Like

Hi @DavidDarnes
Thanks for replying to my post.
I read the Get and foreach documentation. After reading the documentation and trying them out what I could understand is that Get can be used to access any ghost server side api (like posts,tags) and we can use that to create our own custom designs right?
But can it be used to access some public api outside of the ghost?
like:-
https://flickzeeapi.herokuapp.com/movies?searchText=${this.searchText}
or any JSON data in a file.
And I think I can use mustache for client side javascript

Thank you for helping me.

The Handlebars templating in Ghost is for server-side rendering. For your search tool you’ll either need to generate the entire JSON object and use JavaScript to filter it on the client, or use the Ghost Content API to retrieve data with requests.

1 Like