Ionic Auto complete input?

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

Have you solved that?

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

I’m using the html and css found here.

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

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)

3 Likes

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

1 Like

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

great! it is similar to autocomplete

1 Like

can you please also add ts file.

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.

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

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

1 Like

have you solved that??

please add ts file also

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.

Ionic3 autocomplete

1 Like