feat(search-input): added autocomplete

[mcoker]

fixes #3863

@mcarrano

• This does not add the hint/grey text that finishes the search term in the text input when there is a single option in the autocomplete box. That part isn't obvious how to implement since the text there is a regular text input and you can't style text like that in a text input. If that feature is a requirement, I'd like to have a follow-up issue to investigate how to best do that.
• We have the option to use the menu component here. I didn't implement it that way, and just made this list a feature of the search input component since we wouldn't be able to promote the search input component until we promoted the menu component. If that's OK, or we anticipate wanting to support features of the menu component in this list (descriptions, favorites, etc), I can update this component to use the menu component instead.

[patternfly-build]

Preview: https://patternfly-pr-3892.surge.sh

A11y report: https://patternfly-pr-3892-coverage.surge.sh

CSS Size Report

Name	Current	Previous	Diff %
components/SearchInput/search-input.css	8.0 kB	5.8 kB	27.30
patternfly-no-reset.css	1.1 MB	1.1 MB	0.20
patternfly.css	1.1 MB	1.1 MB	0.20
patternfly.min.css	959.2 kB	957.3 kB	0.20

[mattnolting]

This looks great, although it feels to me like we should use the menu. Could we keep this dedicated menu with the assumption that later we could promote the menu and replace?

[mcarrano]

This looks good @mcoker . I don't see a reason to pull in the menu component here. This should never be anything more than a single select list. I'm more concerned that we can't complete the auto-complete text styling. Do you have any idea how others are doing this? Maybe needs more research. We could still support the basic functionality without it. Thoughts?

[mcoker]

I don't see a reason to pull in the menu component here. This should never be anything more than a single select list.

@mcarrano OK that works, though if we end up wanting to support descriptions or other things, it's a breaking change to use the menu component here instead. We would need to align that update with a breaking change release. That's OK?

Do you have any idea how others are doing this?

Do you have an example of this being used somewhere? Preferably on a desktop device. I checked amazon, search engines, and a handful of places and I couldn't find an instance of the hint text appearing in a search text input field. I can think of a couple of ways off the top of my head to do it though it isn't a very straight forward approach.

The easiest way might be to layer text inputs on top of one another, so that a text input underneath the active/top one has the full search term in hint styling (grey text) and that text shows through as you're typing in the top text input.

Another way could be to use contenteditable with a regular <div> that the user types in, which will mimic a text input, and to have react manage showing the hint text after the cursor to complete the word.

[mcarrano]

@mcoker yes, I see where this can get really complicated. I did some quick research and most auto-complete components do not support hints like this. But I found two references:

https://www.npmjs.com/package/react-autocomplete-hint

https://reactjsexample.com/a-react-component-for-autocomplete-hint/

See if these give you any ideas. If this becomes too unwieldy, I'd consider pulling the requirement and perhaps just supporting a keyboard shortcut to auto-complete the term when there is only one remaining option.

[mcoker]

@mcarrano thanks for that! The component used in those pages is the same, but looks like they layer inputs on top of one another like I mentioned above. I'll give that a shot here.

[mcoker]

@mcarrano @mattnolting @jessiehuff added support for hint text.

[mcarrano]

Thanks for figuring out how to implement the hint text @mcoker . This looks good to me!

[redallen]

🎉 This PR is included in version 4.90.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀