Implement page search URL + Opensearch XML#2143
Implement page search URL + Opensearch XML#2143ian-h-chamberlain wants to merge 4 commits intonushell:mainfrom
Conversation
There are two pieces to this: - Prefill and execute search when a page loads with the `search` param set - Update the URL bar when a search is executed, with 500ms debounce
Also fixup some TS lint errors in the new component, language server wasn't working before.
|
sounds cool! |
| function handleSearchInput(event: InputEvent) { | ||
| const target = event.target as HTMLInputElement | undefined; | ||
| const searchQuery = target?.value; | ||
| if (target?.id !== 'docsearch-input' || !searchQuery) { |
There was a problem hiding this comment.
I think If the input value is empty it's better to delete the search param here. Returning early when the input is cleared means the existing ?search= parameter is not removed. As a result, after the user clears the search and closes the modal, the URL may still retains the old query.
There was a problem hiding this comment.
Hmm, good point, I think that probably makes sense. I'm not sure how easy it will be to detect the modal being dismissed (since that logic is implemented in a nested child), but it's probably doable with some kind of global event listener at least.
I will try to get to implementing this next week when I should have some time!
There was a problem hiding this comment.
Thanks for the feedback, I ended up rewriting a lot of the implementation to cover a few different cases:
- Modal is dismissed: clear query param
- Search form is reset ("Clear" button): clear query param
- Navigate to search result: builtin navigation clears query param automatically
Use a visibility observer for the input box, which clears the query when it's dismssed. Also use manual `input` dispatch instead of `initialQuery`, so that the initial query is dismissed after the first search runs.
3 participants
Closes #1093
I tend to create a lot of shortcuts to doc searches in my browser, so I wanted the same thing for Nushell! I decided to take a crack at implementing the search URL logic I've seen used by many other docs websites.
Screen.Recording.2026-03-28.at.01.25.37.mov
Also set up Opensearch XML so some browsers can more easily add a search engine:
Implementation
DocSearchcomponent provided by thedocsearchPlugin, and override its registration with our custom componentIn the new
URLDocSearchcomponent:Prefill and execute search when a page loads with the
searchparam set, atonMountedAdd an
inputevent handler, which updates the URL bar when the search bar is updated. Use a 500ms debounce to avoid flooding the user's browser history with partial searches