Create filterable content within a div container

[jmhimara]

I'm trying to use this example to create filterable content within a div container: https://stackoverflow.com/questions/71113013/how-can-i-create-a-search-feature-for-an-array-of-divs-with-no-text-content

Basically, I have the following code in my quarto markdown.

{=html}
<script>
let input = document.getElementById('input');
let animalDivs = document.querySelectorAll('.animal');

input.addEventListener('input', function(e) {
  const term = this.value.toLowerCase();
  animalDivs.forEach(function(div) {
    const animal = div.dataset.tag.toLocaleLowerCase();
    div.hidden = !animal.includes(term)
  });
});
</script>

and each section is wrapped inside a div like this:

<div class="animal" data-tag="animal name">
# Animal Name

more content. ......


</div>

However, it doesn't seem to be working. Any ideas why?

Thanks!

[mcanouil]

Since your question is only HTML/JavaScript, it would be better suited for platforms dedicated to those tools.
Here your issue has nothing to do with Quarto.

This being said, you should include your JavaScript using include-after-body, see https://quarto.org/docs/reference/formats/html.html#includes.

Note on formatting contents with code blocks, you need four backtics, see https://quarto.org/bug-reports.html#formatting-make-githubs-markdown-work-for-us.

[jmhimara]

This being said, you should include your JavaScript using include-after-body, see https://quarto.org/docs/reference/formats/html.html#includes.

Thanks. I will try this when I get to my computer. However I should point out that I can get this to work on regular HTML+JS (for exmaple on jsfiddle.net). But it does not work on Quarto.

[mcanouil]

Then try to include the JavaScript not in the body, if this does not work, please post a complete Quarto document.

[jmhimara]

Thanks! Your suggestion fixed the filtering problem, but now the TOC on the right is gone. Is it the <div class=container> that's the problem?

EDIT: nevermind, I thought I needed the container div, but the filtering works just as well without it.