Hi guys,
I am studying hugo by cloning my favorite site.
I’m trying to implement a search function using flexsearch.js engine.
The search engine works very well on its search page:
http://localhost:1313/search/
But when I try to search from navbar box input form or using the search form on the home page, the script opens the search page but without a search.
As a beginner on javascript I am sure there is an error in the script implementation at /assets/js/search.js
I know it’s not Hugo’s problem but can you tell me a possible solution to follow?
This is a project’s repo
https://github.com/antedoro/Arberia.git
frjo
July 6, 2022, 7:44am
2
I have implemented FlexSearch into my Zen theme. Feel free to copy.
/* eslint-disable no-undef, guard-for-in */
/**
* @file
* A JavaScript file for flexsearch.
*/
(function () {
'use strict';
const index = new FlexSearch.Document({
document: {
id: 'id',
index: ['title','tags','content','date'],
store: ['title','summary','date','permalink']
}
});
function showResults(items) {
This file has been truncated. show original
{{- $.Scratch.Add "searchindex" slice -}}
{{- range $index, $element := where site.RegularPages "Params.exclude_search" nil -}}
{{- $.Scratch.Add "searchindex" (dict "id" $index "title" $element.Title "permalink" $element.RelPermalink "tags" (delimit ($element.Params.tags | default "") " ") "content" $element.Plain "summary" $element.Summary "date" ($element.Date.Format ($.Param "dateformat" | default "2 January, 2006"))) -}}
{{- end -}}
{{- $.Scratch.Get "searchindex" | jsonify -}}
7 Likes
Thanks for the speed of the reply. Now I study your code.
The code of your Hugo site is very well done and packed with rich features.
Unfortunately it doesn’t give me the solution.
It is a good choice to create an html snippet with search results with:
const fragment = document.createDocumentFragment ();
In my case I could create html from the search results on the home page and then send this html to the search page for rendering but I don’t know how to code due to my lack of js knowledge.
Is this a good path or is there an easier way?
What a coincidence .
I have completed a hugo local search in another way recently. You can view it at Search , and if you like, i can tell you how to use it. I have used it for some days, and there has no boring questions.
I’m not familiar of flexsearch.js engine, so I cannot give you some opinions about it now.
Ok where is the code to study
If you are familiar with chinese, just view it at hugo-local-search .
If not, just copy this _search.html
as a partial template:
<div class="container-search">
<div id="data" style="display: none;">
{{ range where .Site.Pages "Kind" "section" }}
{{ if ne .Title "Secrets" }}
{{ range .Pages}}
{{ .Title }}%%{{ .Permalink }}%%{{ .Date.Format "2006-01-02" }}%%{{ .Summary }}%%{{ .Content | plainify }}$$$
{{ end }}
{{ end }}
{{ end }}
</div>
<div id="search">
<!-- 🔎 -->
<span class="sc-icon"><img src="/imgs/icons/search.svg" width="48"> </span>
<span id="sc-clear" onclick="clearInputVal()">✖</span>
<input id="sc-input" oninput="search()" type="text" placeholder="here search search..." />
<div id="sc-res"></div>
</div>
<script src="/js/search.js"></script>
</div>
Append the following contents into your single.html
template, maybe you need do some customizations.
{{ $IsSearch := eq .Title "Search"}}
{{ if $IsSearch }}
{{- partial "partials/_search.html" . -}}
{{ end }}
And then, download the search.js
file and put it into /static/js
. Just click it search.js to download it.
Lastly, exec hugo new search.md
to generate a search page. Preview it at http://localhost:1313/search
.
You just need to style it as you want it seems.
Without search.js file it’is impossible to make a search
What an example looks like ? A demo page ? https://ovirgo.com/search/ ?
ok thanks but i didn’t find a solution that fit on my needings