PageFind

[zinc wyvern]

I'm trying my hands on page find. I've be able to make it work but I've got one issue is that the result I get doesn't include the markdown pages. File paths in the picture. They all have the meta name="title" which is being used in the result.

[silver valve]

Quiet in here?

It looks like no-one has responded to your question yet. People might not be available right now or don’t know how to answer your question. Want an answer while you wait? Try asking our experimental bot in #1095492539085230272.

[sinful topaz]

What directory are you running pagefind on?

[zinc wyvern]

I followed the blog written by you. (so i think dist)

here the git for my project https://github.com/Malik-Shan/grip

[zinc wyvern]

It actually is using all pages.
But issue is that I got my exam papers in this project. If I search for a specifc chapter's paper it only shows the pages with that word on the body rather than the meta tag. Because every page got a meta tag with keyword title in it.
Each paper's page got mcqs keys and when I search for like 12 [question numb] in the input than it started showing those pages. How could I tackle that. Does page find only use the everything in the body and not the head tag?

[sinful topaz]

Yeah, it won't index that by default, but you might be able to use data-pagefind-index-attrs.
E.g. maybe

<meta name="title" content={title} data-pagefind-index-attrs="content">

https://pagefind.app/docs/indexing/#indexing-attributes

[zinc wyvern]

Thank You 💛

[zinc wyvern]

@sinful topaz sorry to bother you again. But I'm getting these two issues.
1) If I type too fast something I'll start showing 1 result multiple times. (used the script given by you)
2) Something I get an error saying
caught (in promise) TypeError: Cannot read properties of undefined (reading 'search') at HTMLInputElement.<anonymous> ((index):319:38)

I know a little bit about debounce. But don't know where to use it. I'm not familiar with await async and don't want to mess things up.

<script is:inline>
document.querySelector('#search')?.addEventListener('input', async (e) => {
// only load the pagefind script once
if (e.target.dataset.loaded !== 'true') {
e.target.dataset.loaded = 'true'
// load the pagefind script
window.pagefind = await import("/pagefind/pagefind.js");
}

// search the index using the input value
const search = await window.pagefind.search(e.target.value)

// clear the old results
document.querySelector('#results').innerHTML = ''

// add the new results
for (const result of search.results) {
const data = await result.data()
document.querySelector('#results').innerHTML += `
<a href="${data.url}">
  <h3>${data.meta.title}</h3>
  <img src="${data.meta.image}" style="width:30px;">
  <p>${data.excerpt}</p>

</a>`
}
})
</script>

[inland wasp]

You'll want to debounce between the input event handler and the actually call to pagefind.search

So in this case, I'd probably move the logic for actually calling search() and updating results out to a separate function. In the input callback, just add the script to the window and start a timer that calls the search/update logic when the timer ends

The trick is to keep track of the timer and reset after each input to make sure it doesn't have a separate time fire for each keystroke