Search bar doesn't work

[PRUBHTEJ]

Hey! The search bar located on the top left hand side doesn't seem to work. Whenever I enter anything into the search bar, it redirects me to the home page. What could be the possible issue?

[PRUBHTEJ]

Attaching a screenshot just for reference.

[cokelly]

I figured this one out. If you open themes/ace-documentation/layouts/partials/footer.html

You can replace:

<!-- Load required Javascript -->
<script src="{{ .Site.BaseURL }}lib/jquery.min.js"></script> <!-- jQuery.js -->
<script src="{{ .Site.BaseURL }}lib/popper.min.js"></script> <!-- Popper.js - dependency of Bootstrap -->

<script src="{{ .Site.BaseURL }}js/bootstrap.min.js"></script> <!-- Other javascript -->

With:

<!-- Load required Javascript -->
<script src="{{ .Site.BaseURL }}/lib/jquery.min.js"></script> <!-- jQuery.js -->
<script src="{{ .Site.BaseURL }}/lib/popper.min.js"></script> <!-- Popper.js - dependency of Bootstrap -->

<script src="{{ .Site.BaseURL }}/js/bootstrap.min.js"></script> <!-- Other javascript -->

Note the additional slashes after the three instances of {{ .Site.BaseURL }}. Adding these slashes directs your browser to the correct location for the javascript and seems to make the difference.

[PRUBHTEJ]

But my footer.html file was already empty. Isn't that weird?

[julianflapper]

Hi, will investigate this issue in the coming week. Apologies for slow response, very busy with other stuff!

[PRUBHTEJ]

No issues, @julianflapper!! Is there any update on this though?

[PRUBHTEJ]

As for the time being, I've disabled the search bar on my website. But I would really love to have a search bar, so if you need any information from my side, do let me know.

[julianflapper]

@PRUBHTEJ looking at your repo, are you even using Hugo and Ace? It looks like the entire theme structure is not present, nor do I see any of the config or Markdown files.

Also, when loading your site, none of the Javascript libraries are loaded: jQuery, Popper, Bootstrap, and also none of the search libraries: Lunr, auro-complete, search.js, etc.

I would advise you to try a fresh installation of Hugo and Ace and see if the search works there. Because for me it does, to it must be something on your end.

The ""/" characters you've added in your footer shouldn't be necessary. Check if you have a "/" behind your baseURL variable in your config.toml.

[PRUBHTEJ]

Are you viewing this repo: https://github.com/SynBioHub/synbiohub-docs ? or this: https://github.com/SynBioHub/synbiohub.github.io Since the first one I've been using that as the source code repo

[julianflapper]

@PRUBHTEJ no I was viewing the other repo you tagged.

But still, you don't have the correct footer file:

https://github.com/SynBioHub/synbiohub-docs/blob/master/themes/ace-documentation/layouts/partials/footer.html

Should be:

https://github.com/vantagedesign/ace-documentation/blob/master/layouts/partials/footer.html

Unless you've made major changes to the theme, I would advise to just reinstall the theme alltogether to make sure everything is installed correctly.

[PRUBHTEJ]

No, actually, I did not do any changes to the theme.

[PRUBHTEJ]

I'll change the footer.html file.

[julianflapper]

@PRUBHTEJ I would then just remove the entire Ace theme and re-install it to make sure everything is correct.

[PRUBHTEJ]

Okay, I'll do that then! Thanks for your guidance, if I get any issues I'll get back to you

[julianflapper]

@PRUBHTEJ if solved, please close the issue. Good luck :)

[PRUBHTEJ]

Sure! You're super helpful. I'm trying the remedy as of now.

[PRUBHTEJ]

The footer.html file shall be auto generated upon hugo-D?

[julianflapper]

@PRUBHTEJ is it empty again? It shouldn't be empty. It should be exactly as how I sent it a few messages ago

[PRUBHTEJ]

What I did was to remove hugo and as well as ace and then reinstalled them, but still footer.html is empty.

[julianflapper]

@PRUBHTEJ lol weird, that can't be because you're downloading this repo and that includes this file: https://github.com/vantagedesign/ace-documentation/blob/master/layouts/partials/footer.html which isn't empty

[PRUBHTEJ]

I'll reinstall it again and get back to you.

[dagerzuga]

I also had some issues with the search bar. I didn't find what was the real problem but what I did to solve this was to start working off the exampleSite and replace it with my own content.

[justinbornais]

I have the same problem, and I was able to boil down the error to the following: http://localhost:1313/index.json is not found.

What I wonder is, why isn't it found? The index.json file that came with the theme is inside the layouts folder, as it should.

This is from line 14 of plugins/search.js:

// Initialize lunrjs using our generated index file
function initLunr(success_callback) {
    if (!endsWith(baseurl,"/")){
        baseurl = baseurl+'/'
    };

    // First retrieve the index file
    $.getJSON(baseurl +"index.json") // Fails right here.
        .done(function(index) {
            pagesIndex = index;
            // Set up lunrjs by declaring the fields we use
            // Also provide their boost level for the ranking
            lunrIndex = new lunr.Index;
            lunrIndex.ref("uri");
            lunrIndex.field('title', {
                boost: 15
            });
            lunrIndex.field('tags', {
                boost: 10
            });
            lunrIndex.field("content", {
                boost: 5
            });

            // Feed lunr with each file and let lunr actually index them
            pagesIndex.forEach(function(page) {
                lunrIndex.add(page);
            });
            lunrIndex.pipeline.remove(lunrIndex.stemmer)
            success_callback();
        })
        .fail(function(jqxhr, textStatus, error) {
            var err = textStatus + ", " + error;
            console.error("Error getting Hugo index file:", error);
        });
}

The index.json file for reference:

[
{{ range $index, $page := .Site.Pages }}
{{- if and (ne $page.Type "json") (ne $page.Type "html") -}}
{{- if and $index (gt $index 0) -}},{{- end }}
{
    "uri": "{{ $page.Permalink }}",
    "title": {{ $page.Title | jsonify }},
    "tags": {{ $page.Params.tags | jsonify }},
    "description": {{ .Description | jsonify }},
    "content": {{$page.Plain | jsonify}}
}
{{- end -}}
{{- end -}}
]