feat: IonInput with typeahead feature

[van9petryk]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

I saw example of typeahead component
https://ionicframework.com/docs/api/select#typeahead-component
but it not satisfy my requirements.

I need typeahead for ion-input component.

Describe the Use Case

Sometimes I just need to provide some options for user to select, but the user can also put they own text inside ion-input.
Also, opening modal each time for typeahead can be frustrating, so need dropdown to appear aside to ion-input.

Describe Preferred Solution

The best solution I saw was https://ng-bootstrap.github.io/#/components/typeahead/examples
It also detect available space on top and bottom of input and put dropdown in best place.
I cannot use it with ionic, because it have selector input[ngbTypeahead] and not sure if patch ion-input[ngbTypeahead] will help

Describe Alternatives

Other good example is ng-select, but it is more about select, than simple input.

Related Code

No response

Additional Information

No response

[liamdebeasi]

Thanks for the report. We created https://ionicframework.com/docs/api/select#typeahead-component as a way of showing how to implement a mobile-optimized typeahead component. The requested UI pattern works well on desktop. However, showing the dropdown below the input tends to not work well on mobile because the keyboard covers the dropdown when it opens:

While you can show the dropdown above the input instead, you are still constrained by screen space making this UI pattern difficult to use on mobile devices.

As a result, we do not have plans to implement this feature in Ionic.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.