Lunr js not giving results

Please check this site https://bpmottathai.gitlab.io/test/search2

I configures the site according to https://learn.cloudcannon.com/jekyll/jekyll-search-using-lunr-js/
But results is not showing

Any help please, I tried with github version it worked. But on gitlab it doesn’t worked…

Can’t speak for why it works on GitHub and not GitLab, but if you check the browser’s console you’re getting the following JavaScript errros:

search.js:36 Uncaught TypeError: Cannot read property 'setAttribute' of null
    at search.js:36
    at search.js:61
(anonymous) @ search.js:36
(anonymous) @ search.js:61

Hi @mmistakes Thanks for responding. I am a newbie here. Where can be the problem?

what is the content of your .gitlab-ci.yml file on gitlab? if it works on GH but not GL there is probably something missing from your build file. Like maybe you are just building the site rather than bundle whatever (I don’t use bundler so I don’t remember what all you have to run to get it to check your plugins and install them as needed).

image: ruby:2.3

variables:
  JEKYLL_ENV: production

before_script:
  - export LC_ALL="C.UTF-8"
  - export LANG="en_US.UTF-8"
  - export LANGUAGE="en_US.UTF-8"
  - bundle install

test:
  stage: test
  script:
  - bundle exec jekyll build -d test
  artifacts:
    paths:
    - test
  except:
  - master

pages:
  stage: deploy
  script:
  - bundle exec jekyll build -d public
  artifacts:
    paths:
    - public
  only:
  - master

It also not works in localhost…

have you checked the logs to see if there were any errors?

I would maybe add the bundle install line to the pages section right before bundle exec? no idea if that would help though, I have one site on GL and battled quite a bit to get it to all work the way I wanted but that didn’t have anything to do with bundler.

can you post a link to the working GH site? maybe there is a difference in a path to the js files or something.

I’m not a JavaScript expert but could it be because the search box in the header and on the page both have the same ID selector? Looks like its failing on getting the query from the search input.

Entirely possible it’s getting confused because you have two input elements named the same thing.

document.getElementById('search-box').setAttribute("value", searchTerm);

As a test maybe try changing the header box to something else and keep the input on the page search-box.

1 Like

Still it doesn’t work

wild guess - on the site that doesn’t work you are loading search.js in the head - I think you need to load it last so move that line <script src="/test/bs/assets/javascripts/search.js"></script> to the footer some where.

On the site where it does work you have a really screwy document that sort of looks like an html page inside another html page - I am surprised any of it works, but I think the search works as it is loaded in the second head section and I think that is after something else loads that it needs.

Thanks @rdyar That solved the probem. I changed the js line to footer.