feat: Searchable/Filterable `ion-select` or Custom Auto Complete List `ion-input`

[LazyGeniusMan]

Prerequisites

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

Describe the Feature Request

User can type something in input field to limit the predefined choice that's shown in their UI.

Describe the Use Case

It would be useful and increase UX when there are a lot of predefined choice in user input, so user didn't have to scroll. Common example is when choosing country and tag.

Describe Preferred Solution

If autocomplete input is implemented instead of select, an option to restrict user input whether the input value has to be in the list or not would be nice.

Describe Alternatives

Using ion-input with ionChange to filter/search the list (similiar to [this])https://ionicframework.com/docs/api/searchbar#debounce()and then override the input value on click event when the list is clicked might be doable but IMHO this functionality should included since it's common need.

Related Code

No response

Additional Information

Apologize for linking other UI framework/library. These are some example how it's done in other UI framework/library:	Filterable/Searchable Select	Custom Autocomplete Input
Angular Material
PrimeNG	PrimeNG
Mantine	Mantine
MUI
Element Plus	Element Plus
Vuetify

[liamdebeasi]

Thanks for the report. We have a PR open that adds a typeahead/autocomplete sample application: https://github.com/ionic-team/ionic-docs/pull/2704

At the moment we have no plans to introduce an autocomplete component built-in to Ionic Framework. The main reason is that the traditional autocomplete UI does not translate well to mobile devices due to the dropdown menu floating over the content when the keyboard appears. Mobile apps that implement this pattern typically show a full-page view in a modal/page.

Here is a preview of the sample application for typeahead: https://ionic-docs-git-autocomplete-example-ionic1.vercel.app/docs/api/select#typeahead-component

[LazyGeniusMan]

Thanks for the report. We have a PR open that adds a typeahead/autocomplete sample application: ionic-team/ionic-docs#2704

Thank you for adding this example.

At the moment we have no plans to introduce an autocomplete component built-in to Ionic Framework. The main reason is that the traditional autocomplete UI does not translate well to mobile devices due to the dropdown menu floating over the content when the keyboard appears. Mobile apps that implement this pattern typically show a full-page view in a modal/page.

Ah yea, make sense.

Here is a preview of the sample application for typeahead: https://ionic-docs-git-autocomplete-example-ionic1.vercel.app/docs/api/select#typeahead-component

Could you take it a little further by also give an example for multiple selection? Maybe adding checkbox into the ion-item in the modal?

[liamdebeasi]

Hi everyone,

We recently released updated documentation that shows how to achieve an autocomplete/typeahead component in Ionic. I also updated the sample to allow for multiple selection as per https://github.com/ionic-team/ionic-framework/issues/26607#issuecomment-1386316297.

The docs are available at https://ionicframework.com/docs/api/select#typeahead-component. I am going to close this, but let me know if there are any questions.

[LazyGeniusMan]

Thanks,

The docs are available at https://ionicframework.com/docs/api/select#typeahead-component. I am going to close this, but let me know if there are any questions.

The example in v6 docs is work as expected but it isn't in v7 docs. When I select the options, the checkbox went to the left and then the label is gone. Is that expected since v7 is still beta ?

[liamdebeasi]

Thanks! I fixed this in https://github.com/ionic-team/ionic-docs/pull/2781. Note: The StackBlitz examples for v7 might not work. This is a known issue that we are working to resolve. The v6 StackBlitz examples should work as expected.

[ionitron-bot[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.