Search implementation with flexsearch.js

support
1

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

2

I have implemented FlexSearch into my Zen theme. Feel free to copy.

7 Likes
3

Thanks for the speed of the reply. Now I study your code.

4

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?

5

What a coincidence :smile: .

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. :sweat_smile:

6

Ok where is the code to study

7

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.

8

Without search.js file it’is impossible to make a search

9

Sure.

Two way:

  • a gererated static site-content-map; or
  • a realtime site-content-map generator.
10

Have you an example?

11

What an example looks like ? A demo page ? https://ovirgo.com/search/ ?

12

ok thanks but i didn’t find a solution that fit on my needings