Ionic Auto complete input?


#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


#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


#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)


#7

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


#8

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


#9

great! it is similar to autocomplete


#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.

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

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


#12

have you solved that??


#13

please add ts file also


#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.