Ionic Auto complete input?

Ionic Framework ionic-v3
1

Hi Guys!
I just starting to learn ionic 2 , I never tried ionic 1 before
And i try to make input text auto complete on ionic 2
I already tried ng2-auto-complete and ng2-completer to achieve this
but it seems hard to me to understand ,
there’s example for this? I’m done read the documentation especially search bars section , but search bars are not exactly what i need
So hard to find any resource about ionic 2 than ionic 1 ,
should i use jquery auto complete maybe?
and should i move to ionic 1 because ionic 2 is newer and less resource ?
because i’m new for angular 2 too

Thank you , and sorry for bad english

2

Have you solved that?

3

hi, i am looking for the same thing… not a search bar but an input with listdrop down and autocomplete

1 Like
4

I’m using the html and css found here.

5

hi, can you show your custom component if it’s not too much… using only html and css , what about the functionality! much appreciated

1 Like
6

html header

<div class="autocomplete">
	<ion-searchbar
		[(ngModel)]="searchText"
		(ionFocus)="addFocus()"
		(ionInput)="search()"
		(ionBlur)="removeFocus()"
		debounce=500>
	</ion-searchbar>
	<ion-list>
		<ion-item *ngFor="let res of refRicerca" (click)="addNote(res)">
			{{res}}
		</ion-item>
	</ion-list>
</div>

css

.autocomplete {
	width: 100%;

	ion-searchbar {
		padding: 1px !important;
	}

	ion-list {
		position: absolute;
		width: inherit;
		overflow-y: scroll;
		max-height: 150%;
		z-index: 999;

		ion-item {

			img {
				max-height: 2.5rem;
				width: auto;
				margin: auto;
				display: block;
			}
		}

		ion-item:hover {
			cursor: pointer;
			background: #f1f1f1
		}
	}
}

Hope this help!

Edit
this is my auto complete (small screen 'cause screencast on chrome and keyboard up)

image
Immagine.png1563×1573 513 KB

10 Likes
7

that function ? is the responsible of autocomplete? when the user click the input?

1 Like
8

No, (click) will add the item to my list.

9

great! it is similar to autocomplete

1 Like
10

can you please also add ts file.

11

Hi there,

This is a slightly different approach that the ones listed above. So it’s basically a select scroller component with a filter/autocomplete bar at the top.

auto-complete
auto-complete.gif376×666 451 KB

You can find the link to the interactive demo & code here.

PS. This is a commercial component, someone might find it useful :+1:

2 Likes
12

have you solved that??

13

please add ts file also

1 Like
14

Hi Andrea, the methods addFocus() and removeFocus() in html file, how did you to hide or show the list? Do you can show the code? Thanks, your post is helping me.

1 Like
15

Ionic3 autocomplete

img-autocomplete
img-autocomplete.png386×679 9.54 KB

1 Like
16

You can checkout ionic4-auto-complete. Despite it’s name it works with Ionic 2+ and Angular 2+.

17

Need to be update, the Project is Dead, new Project is Here

This’s the fork of the Ionic 2 version to ionic 4

1 Like