9. Search: Ion-searchbar

/ *---HTML----* /<Ion-searchbar[(Ngmodel)]= "SearchQuery"(Input)= "GetItems ($event)"></Ion-searchbar><ion-list>  <Ion-item*ngfor= "#item of items">{{Item}}</Ion-item></ion-list>/ *---HTML----* /

/*---js----*/Import {Page} from' Ionic-angular '; @Page ({templateurl:' Build/pages/tabs/tabs.html ',}) Export Class Tabspage {constructor () { This. SearchQuery = ";  This. Initializeitems (); } initializeitems () { This. Items = [      ' Amsterdam ',      ' Bogota ',    ]; } getItems (Searchbar) {//give the scope items a default value.      This. Initializeitems (); //gets the value in the text box    varQ =Searchbar.value; //If the value is an empty string, the item is not filtered    if(Q.trim () = = ") {      return; }    //otherwise filter the This.items     This. Items = This. Items.filter ((v) = {      if(V.tolowercase (). IndexOf (Q.tolowercase ()) >-1) {        return true; }      return false; })  } } /*---js----*/

There are more styles http://ionicframework.com/docs/v2/api/components/searchbar/Searchbar/

9. Search: Ion-searchbar