FlexSearch does not seem to return search results

[Nadine2016]

I am trying out the flex search option and although I can see the search bar at the top, I do not get back any search results, no matter what I enter in the search bar.

This is my current setting in the toml file:

[params.flexsearch]

enabled = true
tokenize            = "full" # default is "forward"
cache               = 100    # default is 100
optimize            = true   # default is true
minQueryChar        = 3      # default is 0 (disabled)
maxResult           = 5      # default is 5
searchSectionsIndex = []

This is a screenshot from the search

I am not sure if I am missing any setting or something else.

[colinwilson]

Do you see any errors in the network or console tabs of your browser's developer tools?

[Nadine2016]

Hey @colinwilson

I just compared how it looks like on your site vs mine and it seems like no query is being initiated on my site when I enter a search term.

This is how it looks like on your page when I enter something

And this is how it looks on my site

I do not see any errors on my end. But I noticed that the queries on your site are going to Algolia. Do I need to set up something there to make this work?

[Nadine2016]

@colinwilson I looked at the page source and I don't think there is a flexsearch index on the page.

I found a script:

<script type="text/javascript" src="/docs/js/flexsearch.bundle.min.249548594cb6843f3060a3cdd3043799676c59ce8db83358a3fc2e4d20598d05dfa6ce4994805d2835cb33b54dc9b9e7.js" integrity="sha384-JJVIWUy2hD8wYKPN0wQ3mWdsWc6NuDNYo/wuTSBZjQXfps5JlIBdKDXLM7VNybnn" crossorigin="anonymous"></script>

the button

<div class="collapse" id="FlexSearchCollapse">
--
  | <div class="flexsearch-container">
  | <div class="flexsearch-keymap">
  | <li>
  | <kbd class="flexsearch-button-cmd-key"><svg width="15" height="15" aria-label="Arrow down" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M7.5 3.5v8M10.5 8.5l-3 3-3-3"></path></g></svg></kbd>
  | <kbd class="flexsearch-button-cmd-key"><svg width="15" height="15" aria-label="Arrow up" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M7.5 11.5v-8M10.5 6.5l-3-3-3 3"></path></g></svg></kbd>
  | <span class="flexsearch-key-label">to navigate</span>
  | </li>
  | <li>
  | <kbd class="flexsearch-button-cmd-key"><svg width="15" height="15" aria-label="Enter key" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"></path></g></svg></kbd>
  | <span class="flexsearch-key-label">to select</span>
  | </li>
  | <li>
  | <kbd class="flexsearch-button-cmd-key"><svg width="15" height="15" aria-label="Escape key" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"></path></g></svg></kbd>
  | <span class="flexsearch-key-label">to close</span>
  | </li>
  | </div>
  | <form class="flexsearch position-relative flex-grow-1 ms-2 me-2">
  | <div class="d-flex flex-row">
  | <input id="flexsearch" class="form-control" type="search" placeholder="Search" aria-label="Search" autocomplete="off">
  | <button id="hideFlexsearch" type="button" class="ms-2 btn btn-soft">
  | cancel
  | </button>
  | </div>
  | <div id="suggestions" class="shadow rounded-1 d-none"></div>
  | </form>
  | </div>
  | </div>

and another script output:

<script type="module">
--
  | var suggestions = document.getElementById('suggestions');
  | var search = document.getElementById('flexsearch');
  |  
  | const flexsearchContainer = document.getElementById('FlexSearchCollapse');
  |  
  | const hideFlexsearchBtn = document.getElementById('hideFlexsearch');
  |  
  | const configObject = { toggle: false }
  | const flexsearchContainerCollapse = new Collapse(flexsearchContainer, configObject)
  |  
  | if (search !== null) {
  | document.addEventListener('keydown', inputFocus);
  | flexsearchContainer.addEventListener('shown.bs.collapse', function () {
  | search.focus();
  | });
  |  
  | var topHeader = document.getElementById("top-header");
  | document.addEventListener('click', function(elem) {
  | if (!flexsearchContainer.contains(elem.target) && !topHeader.contains(elem.target))
  | flexsearchContainerCollapse.hide();
  | });
  | }
  |  
  | hideFlexsearchBtn.addEventListener('click', () =>{
  | flexsearchContainerCollapse.hide()
  | })
  |  
  | function inputFocus(e) {
  | if (e.ctrlKey && e.key === '/') {
  | e.preventDefault();
  | flexsearchContainerCollapse.toggle();
  | }
  | if (e.key === 'Escape' ) {
  | search.blur();
  |  
  | flexsearchContainerCollapse.hide();
  | }
  | };
  |  
  | document.addEventListener('click', function(event) {
  |  
  | var isClickInsideElement = suggestions.contains(event.target);
  |  
  | if (!isClickInsideElement) {
  | suggestions.classList.add('d-none');
  | }
  |  
  | });
  |  
  |  
  |  
  |  
  | document.addEventListener('keydown',suggestionFocus);
  |  
  | function suggestionFocus(e) {
  | const suggestionsHidden = suggestions.classList.contains('d-none');
  | if (suggestionsHidden) return;
  |  
  | const focusableSuggestions= [...suggestions.querySelectorAll('a')];
  | if (focusableSuggestions.length === 0) return;
  |  
  | const index = focusableSuggestions.indexOf(document.activeElement);
  |  
  | if (e.key === "ArrowUp") {
  | e.preventDefault();
  | const nextIndex = index > 0 ? index - 1 : 0;
  | focusableSuggestions[nextIndex].focus();
  | }
  | else if (e.key === "ArrowDown") {
  | e.preventDefault();
  | const nextIndex= index + 1 < focusableSuggestions.length ? index + 1 : index;
  | focusableSuggestions[nextIndex].focus();
  | }
  |  
  | }
  |  
  |  
  |  
  |  
  | (function(){
  |  
  | var index = new FlexSearch.Document({
  |  
  | tokenize: "full",
  | minlength:  3 ,
  | cache:  100 ,
  | optimize:  true ,
  | document: {
  | id: 'id',
  | store: [
  | "href", "title", "description"
  | ],
  | index: ["title", "description", "content"]
  | }
  | });
  |  
  |  
  |  
  |  
  |  
  |  
  |  
  |  
  |  
  |  
  |  
  |  
  |  
  | search.addEventListener('input', show_results, true);
  |  
  | function show_results(){
  | const maxResult =  5 ;
  | const minlength =  3 ;
  | var searchQuery = this.value;
  | var results = index.search(searchQuery, {limit: maxResult, enrich: true});
  |  
  |  
  | const flatResults = new Map();
  | for (const result of results.flatMap(r => r.result)) {
  | if (flatResults.has(result.doc.href)) continue;
  | flatResults.set(result.doc.href, result.doc);
  | }
  |  
  | suggestions.innerHTML = "";
  | suggestions.classList.remove('d-none');
  |  
  |  
  | if (searchQuery.length < minlength) {
  | const minCharMessage = document.createElement('div')
  | minCharMessage.innerHTML = `Please type at least <strong>${minlength}</strong> characters`
  | minCharMessage.classList.add("suggestion__no-results");
  | suggestions.appendChild(minCharMessage);
  | return;
  | } else {
  |  
  | if (flatResults.size === 0 && searchQuery) {
  | const noResultsMessage = document.createElement('div')
  | noResultsMessage.innerHTML = "No results for" + ` "<strong>${searchQuery}</strong>"`
  | noResultsMessage.classList.add("suggestion__no-results");
  | suggestions.appendChild(noResultsMessage);
  | return;
  | }
  | }
  |  
  |  
  | for(const [href, doc] of flatResults) {
  | const entry = document.createElement('div');
  | suggestions.appendChild(entry);
  |  
  | const a = document.createElement('a');
  | a.href = href;
  | entry.appendChild(a);
  |  
  | const title = document.createElement('span');
  | title.textContent = doc.title;
  | title.classList.add("suggestion__title");
  | a.appendChild(title);
  |  
  | const description = document.createElement('span');
  | description.textContent = doc.description;
  | description.classList.add("suggestion__description");
  | a.appendChild(description);
  |  
  | suggestions.appendChild(entry);
  |  
  | if(suggestions.childElementCount == maxResult) break;
  | }
  | }
  | }());

[colinwilson]

Yeah, it looks like the index is not being generated for some reason. Do you have a sanitized copy of your hugo.toml that you're able to share?

[Nadine2016]

@colinwilson here it is. I added the flexsearch part after I realized the search does not work so I tried to add it to see if that made a difference, but the search behaves the same with or without that block.

baseURL = "/"
languageCode = "en-us"
title = "Documentation"
linkTitle = "Docs"
contentDir = "content/en/"

[module]
    [[module.imports]]
        path = ""
        disable = false
    [[module.imports]]
        path = "github.com/gohugoio/hugo-mod-bootstrap-scss/v5"
        disable = false

[params]

buildCondition = "product1"
# google_font = ["Proxima Nova:300,300i,400,400i,700,700i"]
mono_font = "Courier"

[params.footer]

copyright = "Copyright 2023"

[params.social]

github = "/docs"
twitter = "https://twitter.com/"

[params.docs]

title = "Documentation"
themeColor = "blue"
prism = true
darkMode = true
breadcrumbs = true
descriptions = true
backToTop = true
sidebarIcons = true
titleIcon = false
lastMod = true
scrollspy = true
navDesc = true
ghrepo = ""
editPage = true
toc = true


[params.flexsearch]

enabled = true
tokenize            = "full" # default is "forward"
cache               = 100    # default is 100
optimize            = true   # default is true
minQueryChar        = 3      # default is 0 (disabled)
maxResult           = 5      # default is 5
searchSectionsIndex = []

[markup]

[markup.tableOfContents]

endLevel = '6'
startLevel = '1'

[markup.goldmark.renderer]

unsafe = true

[colinwilson]

Sorry for the delayed response (was on break).

I see that your contentDir is set to content/en/.

What do your site URLs look like? e.g. https://<mydomain>/en/example-page or https://<mydomain>/docs/example-page?

[Nadine2016]

hey @colinwilson so we have multiple products under the en directory, such as this:

content
  en
     product1
     product2

And then our URL will look like this https://<mydomain>/product1 and https://<mydomain>/product2