balaji balaji - 1 year ago 2573
TypeScript Question

How to do auto-complete in ionic 2 (search-bar)

I am trying to do an auto complete in my search bar what i have done so far is.

I have an array with some strings. and then i am trying to list in my items it i am able to search the particualr item.

But my requirement is not to display the items in a list. I have to make on clicking the search bar all the strings in array should come and the i have to make a search.


<ion-toolbar primary >
<ion-searchbar (ionInput)="getItems($event)" autocorrect="off"></ion-searchbar>


<ion-content padding>

<ion-item *ngFor="let item of items">
{{ item }}


Code for search.ts file:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

Generated class for the SearchPage page.

See for more info on
Ionic pages and navigation.
templateUrl: 'build/pages/search/search.html',
export class SearchPage {
private searchQuery: string = '';
private items: string[];

constructor(private navCtrl: NavController) {

initializeItems() {
this.items = [

getItems(ev: any) {
// Reset items back to all of the items

// set val to the value of the searchbar
let val =;

// if the value is an empty string don't filter the items
if (val && val.trim() != '') {
this.items = this.items.filter((item) => {
return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);

Question :

How to get the value of an array through auto complete in ionic 2.

Answer Source

In order to achieve that, you just need to add a small thing to your code. Please take a look at this plunker.

Like you can see there, with the showList variable we can show the results only after the user has searched something.

  <ion-list *ngIf="showList">
    <ion-item *ngFor="let item of items">
      {{ item }}

We first set that variable to false in the constructor and then we set it to true inside the getItems(...) method.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download