Experimental search completion #7979
Conversation
pkg/web_css/lib/src/_search.scss
Outdated
| } | ||
|
|
||
| .search-completer-option:hover { | ||
| background-color: #ccc; |
There was a problem hiding this comment.
Note to self: we should have tests that prevent submitting CSS values like this, and forces us to use the color palette that is for both light and dark mode.
This is fine for now, I will update these is a follow-up PR (as I want to also update the naming of the CSS variables).
There was a problem hiding this comment.
Nice.
I'd love the styling to be more "material" eg. like: https://material.angular.io/components/autocomplete/overview#autocomplete-filter
|
|
||
| // If not triggered automatically and not forced by Ctrl+Space, then | ||
| // we're done. | ||
| if (!state.triggered && !state.forced) { |
There was a problem hiding this comment.
Perhaps use a switch here. It is not clear what states are left...
There was a problem hiding this comment.
It is possible that a class hierarchy would be nice like:
sealed class State {}
final class InactiveState extends State {}
sealed class ActiveState extends State {}
final class NoSuggestionsState extends ActiveState {}
sealed class CompletingState extends ActiveState {}
final class ActiveTriggeredState extends CompletingState {}
final class ActiveForcedState extends CompletingState {}Or something like that.. But it's also a bit in-sane to be doing that 🤣
After all, all the state here is inside one file, and it's a private thing.
It's used when:
- rendering HTML,
- tracking state (responding to input, focus change, selection change, etc),
- handling keyboard input.
That's it.
The only messy thing right now is that suggestions depends on forced -- that could be fixed.
| /// Completion is not active, happens whens: | ||
| /// * The input element doesn't have focus, or, | ||
| /// * There is a non-empty selection. | ||
| final bool inactive; |
There was a problem hiding this comment.
Should these be an enum? Can we be eg. inactive and forced at the same time?
There was a problem hiding this comment.
In theory yes, I think so.
| ))); | ||
| }); | ||
|
|
||
| if (!request.acceptsGzipEncoding()) { |
There was a problem hiding this comment.
Why not just reject the request?
There was a problem hiding this comment.
I'm 50/50 on that, maybe it's the better choice.
| name: 'q', | ||
| placeholder: placeholder, | ||
| autocomplete: 'on', | ||
| autocomplete: 'off', |
There was a problem hiding this comment.
Should this not be conditional on the experiment?
There was a problem hiding this comment.
no, we don't want the browser to auto-complete, it just suggests what you've typed before.
Yes and no, I want the dropdown to follow the caret, not the input field. Like how auto-complete works in an IDE. |
3 participants
This could probably use a few tests and some more polishing of CSS (and maybe position offsets).
Might be worth doing some tests in follow up PRs.