Hello everyone - I've made my own search box and I'm sharing the code here.
Features:
Searches your blog title and subtitles for the user inputted keywords. If it matches the title, return it. If it matches the sub title (meta description) of the blog post, label it with a special indicatory, like "(related)".
Automatically opens a new tab towards that blog post when selected.
Demo:
https://www.visigo.fr/blogsearch.html
Three steps:
Step 1 (Setup):
a) Add a simple "Searchable List" component to your page.
b) Give that Searchable List component an identifier (I recommend "blog-search" - you will have less settings to change later)
c) Add a "jQuery Source Code" object to your page.
d) Add some blog posts if you don't have any:)
Step 2:
Open the jQuery Source Code, replace EVERYTHING by pasting this code.
You MUST modify the first two parameters or else it will not work. You must also modify the BLOG_SEARCH_SELECTOR and BLOG_SEARCH_LANGUAGE to reflect your actual use case.
Step 3:
Save your page, load it up and try it out!
If you want to change the action taken after the user selects an option, modify line ~48 "window.open(data.url)" and change it to whatever you'd like.
Additional info:
-
This does not allow you to search categories or tags. This could theoretically be implemented, but I'd need your help to understand the best use cases.
-
Accented characters:
I've decided to disregard accented characters when making the comparison. This is to allow people to choose how they search for topics, especially if they are searching in a language that is not the default one on their keyboard. The details of how this is processed is in the removeDiacritics function. -
FYI, AppDrag's blog API returns the results in this format, which you can access using the data variable returned after user selection:
{
"id": "9", // Integer of the blog post ID number
"appID": "your-app-id",
"title": "The Title of your Blog Post",
"subTitle": "The meta description of your Blog Post",
"imageUrl": "uploads/url-of-your-blog-photo",
"tags": "blog-post-tags",
"category": "[\"4\",\"5\"]", // Blog post categories as JSON stringified array
"author": "John Doe",
"nbReads": "152",
"previewID": "b2b6bxd2-exxe-480c-abf4-a2908s2b4829", // GUID of blog preview ID
"totalRead": "152",
"isPublished": "True",
"PublishDate": "2020-10-20 09:34:05",
"formattedDate": "20 octobre, 2020",
"lastUpdate": "2020-08-31 13:56:39"
}