Discuss search omnibox

[tmpfs]

I think it would be good to have one blessed solution for how to add the search widget to a site.

I have all the basic parts working but looking to @chrism for some polish on the UX and default styling.

[tmpfs]

One thing I have noticed is that the list of results is not hidden when clicking outside the search results which I think is easy to fix.

I quite like the material search box:

https://material-ui.com/

Is that something we should aim for?

Also I think it would be nice to provide default light and dark styles for the search widget, what do you think @chrism?

[chrism]

I think it is a good idea, but I’m not sure how to do this.

For example, if I’m using tailwind I’d probably want to style the search input myself and not include the default styling.

Whereas maybe there should be a default.

For me, something I’ve found very flexible is to use the concept of contextual components.

Not sure if that is applicable here but this gives an outline I think https://embermap.com/topics/contextual-components/flexible-interfaces

Basically elements like the button and input would be composable so can be styled as the developer wants.

{{#seach as |s|}}
  {{s.search-input class="myclass-input"}}
  {{s.seach-button class="myclass-button extra-class"}}
{{/search}}

Maybe something like this could help with an optional default CSS styling?

[tmpfs]

I like that pattern with the context-aware child elements and it is something we should be able to support :+1:

For now though I think it is probably best to defer this work and not get too caught up in styling issues until there is a good component/plugin/style/theme system designed and in place.

The markup is trivial:

<div class="search-wrapper"><input data-search="site-index" placeholder="Enter keywords, eg: minify" class="search-input"><div class="search-progress" style="width: 100%; opacity: 0;"></div><div data-search="site-index-output" class="search-output"></div></div>

There is a wrapper element and the two inner elements, one for the input field and one to show the results. I think this markup structure might cause issues when you want to style it in certain ways and maybe we should cross that bridge when we get there.

For now my aim is to have an icon toggle that shows and hides this element.

There is a very basic stylesheet here: https://github.com/hypertext-live/search-runtime/blob/master/search.css

Which is not bundled, right now it is expected that people will integrate the styles manually.

Look forward to seeeing what issues we run into and working out the best design for this!