Skip to content

Load new search results on vocab and global search pages#1917

Merged
UnniKohonen merged 6 commits intomainfrom
issue1532-load-more-search-results
Feb 2, 2026
Merged

Load new search results on vocab and global search pages#1917
UnniKohonen merged 6 commits intomainfrom
issue1532-load-more-search-results

Conversation

@UnniKohonen
Copy link
Contributor

Reasons for creating this PR

No new results are loaded when scrolling on vocab and global search pages. This PR adds the functionality.

Link to relevant issue(s), if any

Description of the changes in this PR

  • Add load-search-results.js that loads new search results when the search result list is scrolled down
  • Add new search_count and search_results_size keys to SKOSMOS object
  • Add cypress tests for vocab and global search pages
  • Add CSS styles for search loading and counts messages

Known problems or uncertainties in this PR

Checklist

  • phpUnit tests pass locally with my changes
  • I have added tests that show that the new code works, or tests are not relevant for this PR (e.g. only HTML/CSS changes)
  • The PR doesn't reduce accessibility of the front-end code (e.g. tab focus, scaling to different resolutions, use of .sr-only class, color contrast)
  • The PR doesn't introduce unintended code changes (e.g. empty lines or useless reindentation)

@UnniKohonen UnniKohonen added this to the 3.1 milestone Jan 29, 2026
@UnniKohonen UnniKohonen self-assigned this Jan 29, 2026
@UnniKohonen UnniKohonen requested a review from joelit January 29, 2026 12:02
@UnniKohonen UnniKohonen moved this to Under review in Skosmos 3.x Backlog Jan 29, 2026
@UnniKohonen UnniKohonen changed the title Load new search results on scroll on vocab and global search pages Load new search results on vocab and global search pages Jan 29, 2026
Copy link
Contributor

@joelit joelit left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks pretty good. I would handle the search parameters trough the provided JS object, though.

Comment on lines +20 to +23
const searchURL =
window.SKOSMOS.pageType === 'vocab-search'
? `${window.SKOSMOS.vocab}/${window.SKOSMOS.lang}/search?clang=${window.SKOSMOS.content_lang}&q=${params.get('q')}&offset=${searchResultOffset}`
: `${window.SKOSMOS.lang}/search?clang=${window.SKOSMOS.content_lang}&q=${params.get('q')}&vocabs=${params.get('vocabs')}&offset=${searchResultOffset}`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe instead use the URLSearchParams object to handle the search parameters

Suggested change
const searchURL =
window.SKOSMOS.pageType === 'vocab-search'
? `${window.SKOSMOS.vocab}/${window.SKOSMOS.lang}/search?clang=${window.SKOSMOS.content_lang}&q=${params.get('q')}&offset=${searchResultOffset}`
: `${window.SKOSMOS.lang}/search?clang=${window.SKOSMOS.content_lang}&q=${params.get('q')}&vocabs=${params.get('vocabs')}&offset=${searchResultOffset}`
params.set('offset', searchResultOffset)
const searchURL =
window.SKOSMOS.pageType === 'vocab-search'
? `${window.SKOSMOS.vocab}/${window.SKOSMOS.lang}/search?${params.toString()}`
: `${window.SKOSMOS.lang}/search?${params.toString()}`

const newLastResult = document.querySelector('.search-result:last-of-type')

const translatedMessage = $t('All %d results displayed').replace('%d', window.SKOSMOS.search_count)
newLastResult.innerHTML += `<p id="search-count">${translatedMessage}</p>`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks a bit hacky, but when I tried writing something nicer by creating a p-element and appending it to the search-results div, it didn't really come up that much better.

@sonarqubecloud
Copy link

@UnniKohonen UnniKohonen requested a review from joelit January 29, 2026 15:09
Copy link
Member

@osma osma left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested it. Looks good, also works with special characters in the search string. Excellent work!

@UnniKohonen UnniKohonen merged commit 5f3dc8b into main Feb 2, 2026
21 of 23 checks passed
@UnniKohonen UnniKohonen deleted the issue1532-load-more-search-results branch February 2, 2026 10:05
@github-project-automation github-project-automation bot moved this from Under review to Issue/PR closed in Skosmos 3.x Backlog Feb 2, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Use e.g. Waypoints to partially render the search result lists

3 participants