Ion search show list when start typing

Ionic Framework ionic-v3
1

Hi all,
I have a list and when I search items the list shrinks when start typing a letter. What I want is to hide the list until a user starts typing. What can I do to do that. I know I have to change something and have to insert an if… But where?

// Selectie op toetsaanslagen
	getItems(searchbar) {
  // Reset items back to all of the items
  this.initializeItems();

  // set q to the value of the searchbar
  var q = searchbar.srcElement.value;


  // if the value is an empty string don't filter the items
  if (!q) {
    return;
  }

  this.productList = this.productList.filter((v) => {
    if(v.name && q) {
      if (v.name.toLowerCase().indexOf(q.toLowerCase()) > -1) {
        return true;
      }
      return false;
    }
  });

  console.log(q, this.productList.length);

}
//Einde selectie op toetsaanslagen
2

I forgot something, this is the piece where I have to change something I guess:

this.productRef = firebase.database().ref('/products');
		this.productRef.on('value', productList => {
  let products = [];
  productList.forEach( product => {
    products.push(product.val());
    return false;
  });

  this.productList = products;
  this.loadedProductList = products;
});
3

Found the solution :slight_smile:

under export class:

showList: boolean = false;
	searchQuery: string = '';

Then under constructor:

initializeItems(): void {
  this.productList = this.loadedProductList;
}

// Selectie op toetsaanslagen
	getItems(searchbar) {
  // Reset items back to all of the items
  this.initializeItems();

  // set q to the value of the searchbar
  var q = searchbar.srcElement.value;


  // if the value is an empty string don't filter the items
  if (q && q.trim() != '') {
    

  this.productList = this.productList.filter((v) => {
    
      return (v.name.toLowerCase().indexOf(q.toLowerCase()) > -1);
	});
	
	// Show the results
      this.showList = true;
    } else {
      
      // hide the results when the query is empty
      this.showList = false;
											 }
  console.log(q, this.productList.length);
	
}

And on the html page in the ion-list:

*ngIf="showList"

If anyone needs help with this :wink: Than I can help with all parts.