Skip to content

fix: search query parsing #23088

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
sarahsanders-docker wants to merge 5 commits into from
Closed

fix: search query parsing #23088

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
05d5c12
fix: search query parsing
sarahsanders-docker Jul 14, 2025
e0d82d9
try new fix
sarahsanders-docker Jul 16, 2025
6ee9c17
other fix
sarahsanders-docker Jul 16, 2025
36bd45c
more fixes
sarahsanders-docker Jul 16, 2025
1593f38
please work
sarahsanders-docker Jul 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
140 changes: 78 additions & 62 deletions layouts/_default/search.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,8 +72,9 @@ <h1 class="py-4">{{ .Title }}</h1>
bubbles: true,
cancelable: true,
});
// Trigger the input event for the search input
// Dispatch input event and call manual search
searchInput.dispatchEvent(event);
await onPageSearch({ target: { value: query } });
searchInput.focus();
});

Expand All @@ -84,6 +85,30 @@ <h1 class="py-4">{{ .Title }}</h1>
async function onPageSearch(e) {
pagefind.init();
const query = e.target.value;
const terms = query.trim().split(/\s+/);

// Search each term individually
const allResults = [];

for (let term of terms) {
const result = await pagefind.search(term);
if (result) {
allResults.push(...result.results);
}
}

// Deduplicate results by URL (some results match multiple terms)
const resultMap = new Map();
for (const r of allResults) {
if (!resultMap.has(r.url)) {
resultMap.set(r.url, r);
}
}

const dedupedResults = [...resultMap.values()];
const fullResultsData = await Promise.all(
dedupedResults.map((r) => r.data()),
);

// Set the query parameter in the URL
const params = new URLSearchParams(document.location.search);
Expand All @@ -92,7 +117,7 @@ <h1 class="py-4">{{ .Title }}</h1>
// Default the current page to 1
let currentPage = 1;

// Check if the page parameter exists
// Check if the page parameter exists
const page = params.get("page");
// Calculate the range start based on the page parameter
if (page) {
Expand All @@ -101,72 +126,63 @@ <h1 class="py-4">{{ .Title }}</h1>
const rangeStart = (currentPage - 1) * 10;
const rangeEnd = rangeStart + 10;

// Execute the search
const search = await pagefind.debouncedSearch(query);
// If no search results are found, exit
if (search === null) {
// total number of results
const resultsLength = fullResultsData.length;
// Slice the results based on the range
const resultsData = fullResultsData.slice(rangeStart, rangeEnd);

// If the range does not have any results, display a message
if (resultsData.length === 0) {
searchPageResults.innerHTML = `<div class="p-4">No results found</div>`;
return;
}
// Add an index to the results, for heap tracking
const results = resultsData.map((item, index) => ({
...item,
index: rangeStart + index + 1,
}));

// If the query is not empty, display the search results container
if (query) {
searchPageResults.classList.remove("hidden");
} else {
// total number of results
const resultsLength = search.results.length;
// Get the data for the search results
// Slice the results based on the range start + 10
const resultsData = await Promise.all(
search.results.slice(rangeStart, rangeEnd).map((r) => r.data()),
);
// If the range does not have any results, display a message
if (resultsData.length === 0) {
searchPageResults.innerHTML = `<div class="p-4">No results found</div>`;
return;
}
// Add an index to the results, for heap tracking
const results = resultsData.map((item, index) => ({
...item,
index: index + 1,
}));

// If the query is not empty, display the search results container
if (query) {
searchPageResults.classList.remove("hidden");
} else {
searchPageResults.classList.add("hidden");
}
searchPageResults.classList.add("hidden");
}

// Generate the search results HTML
let resultsHTML = `<div class="text-gray-400 dark:text-gray-500 p-2">${resultsLength} results</div>`;

// Map results to HTML
resultsHTML += results
.map((item) => {
return `<div class="p-4">
<div class="flex flex-col">
<span class="text-gray-400 dark:texty-gray-dark text-sm">${item.meta.breadcrumbs}</span>
<a class="link" href="${item.url}" data-query="${query}" data-index="${item.index}">${item.meta.title}</a>
<p class="text-black dark:text-white overflow-hidden">…${item.excerpt}…</p>
</div>
</div>`;
})
.join("");
// If the results length is greater than 10, display links to show more results
if (resultsLength > 10) {
resultsHTML += `<hr class="border-divider-light dark:border-divider-dark">`;
resultsHTML += `<ul class="flex flex-wrap gap-1 pt-4 pb-8 justify-center text-sm">`;
for (let i = 1; i <= resultsLength / 10; i++) {
if (i == currentPage) {
resultsHTML += `<li class="flex items-center justify-center">
<a href="/search/?q=${query}&page=${i}" class="pagination-link bg-gray-200 dark:bg-gray-800 dark:text-gray-200">${i}</a>
</li>`;
} else {
resultsHTML += `<li class="flex items-center justify-center">
<a href="/search/?q=${query}&page=${i}" class="pagination-link bg-gray-100 dark:bg-gray-900 dark:text-gray-400">${i}</a>
</li>`;
}
// Generate the search results HTML
let resultsHTML = `<div class="text-gray-400 dark:text-gray-500 p-2">${resultsLength} results</div>`;

// Map results to HTML
resultsHTML += results
.map((item) => {
return `<div class="p-4">
<div class="flex flex-col">
<span class="text-gray-400 dark:texty-gray-dark text-sm">${item.meta.breadcrumbs}</span>
<a class="link" href="${item.url}" data-query="${query}" data-index="${item.index}">${item.meta.title}</a>
<p class="text-black dark:text-white overflow-hidden">…${item.excerpt}…</p>
</div>
</div>`;
})
.join("");
// If the results length is greater than 10, display links to show more results
if (resultsLength > 10) {
resultsHTML += `<hr class="border-divider-light dark:border-divider-dark">`;
resultsHTML += `<ul class="flex flex-wrap gap-1 pt-4 pb-8 justify-center text-sm">`;
for (let i = 1; i <= resultsLength / 10; i++) {
if (i == currentPage) {
resultsHTML += `<li class="flex items-center justify-center">
<a href="/search/?q=${query}&page=${i}" class="pagination-link bg-gray-200 dark:bg-gray-800 dark:text-gray-200">${i}</a>
</li>`;
} else {
resultsHTML += `<li class="flex items-center justify-center">
<a href="/search/?q=${query}&page=${i}" class="pagination-link bg-gray-100 dark:bg-gray-900 dark:text-gray-400">${i}</a>
</li>`;
}
resultsHTML += `</ul>`;
}

searchPageResults.innerHTML = resultsHTML;
resultsHTML += `</ul>`;
}

searchPageResults.innerHTML = resultsHTML;
}

searchPageInput.addEventListener("input", (e) => onPageSearch(e));
Expand Down