Search results with Eleventy Edge #2344

mark-reason · 2022-04-25T13:41:23Z

mark-reason
Apr 25, 2022

Hi,

I'm looking to fetch search results via Eleventy Edge. So I will hit an endpoint, it will respond with some JSON, I will then loop through these and return HTML. Is this something Edge would be able to handle or am I barking up the wrong tree?

Cheers

cfjedimaster · 2022-04-25T13:47:42Z

cfjedimaster
Apr 25, 2022

Edge won't do search for you, you would need to handle that yourself somehow, and it can also be done with Eleventy Serverless, regular ole Netlify Functions, or heck, client side. You've got a lot of options. Some examples:

https://www.raymondcamden.com/2021/06/06/using-lunr-with-eleventy-via-netlify-serverless-functions-part-two
https://www.raymondcamden.com/2021/06/02/using-lunr-with-eleventy-via-netlify-serverless-functions
https://www.raymondcamden.com/2021/01/22/using-pre-built-lunr-indexes-with-eleventy
https://www.raymondcamden.com/2020/07/01/adding-algolia-search-to-eleventy-and-netlify-part-two
https://www.raymondcamden.com/2020/06/24/adding-algolia-search-to-eleventy-and-netlify

0 replies

p3palazzo · 2024-06-14T10:26:27Z

p3palazzo
Jun 14, 2024

I've been trying out these solutions with client-side Lunr search on Eleventy 2.0.1. So far I have in my base layout (all the logs are there for debugging):

<head>
<script src="/assets/lunr/lunr.min.js"></script>
<script>
let idx;

fetch('/lunr.json')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log("Index data loaded:", data); // Log data
    idx = lunr.Index.load(data);
    console.log("Lunr index created:", idx); // Log index creation
  })
  .catch(error => {
    console.error("Error loading lunr.json:", error); // Log errors
  });

function performSearch(event) {
  event.preventDefault();
  const query = document.getElementById('search').value.trim();
  console.log("Search query:", query); // Log search query

  if (idx) {
    const results = idx.search(query);
    console.log("Search results:", results); // Log search results

    localStorage.setItem('searchResults', JSON.stringify(results));
    window.location.href = '/search/index.html';
  } else {
    console.error("Lunr index not initialized");
  }
  return false;
}
</script>
</head>

Now when I load my search page, I'd like to pass the search results to the pagination.items variable in the template. Is this possible at all? My search page has this:

<script>
function loadSearchResults() {
  const results = JSON.parse(localStorage.getItem('searchResults'));
  if (results) {
    return results;
  } else {
    console.error("No search results found in localStorage");
    return [];
  }
}

searchResults = loadSearchResults();
console.log("global results:", searchResults);
</script>

For which I am getting searchResults as [ { ref: "n", score: "n", matchData: {...} }, { ... }, ... ]. The results all belong to a single collection.

I also looked at this issue but it seems I would need to render the template from within the script, and I'm not sure how to do this.

0 replies

rdela · 2024-07-03T02:12:23Z

rdela
Jul 3, 2024

@p3palazzo did you evaluate Pagefind?

Some resources:

3 replies

@p3palazzo nice the 11ty website implementation https://www.11ty.dev/docs/search/ - source https://github.com/11ty/11ty-website/blob/main/src/docs/search.njk + https://github.com/11ty/11ty-website/blob/main/src/_includes/components/search.js may help.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Search results with Eleventy Edge #2344

{{title}}

Replies: 3 comments 3 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Search results with Eleventy Edge #2344

mark-reason Apr 25, 2022

Replies: 3 comments · 3 replies

cfjedimaster Apr 25, 2022

p3palazzo Jun 14, 2024

rdela Jul 3, 2024

p3palazzo Jul 3, 2024

p3palazzo Aug 11, 2024

rdela Aug 11, 2024

mark-reason
Apr 25, 2022

Replies: 3 comments 3 replies

cfjedimaster
Apr 25, 2022

p3palazzo
Jun 14, 2024

rdela
Jul 3, 2024