ion searchbar

1<!-- Default Searchbar -->
2<ion-searchbar></ion-searchbar>
3
4<!-- Searchbar with cancel button always shown -->
5<ion-searchbar showCancelButton="always"></ion-searchbar>
6
7<!-- Searchbar with cancel button never shown -->
8<ion-searchbar showCancelButton="never"></ion-searchbar>
9
10<!-- Searchbar with cancel button shown on focus -->
11<ion-searchbar showCancelButton="focus"></ion-searchbar>
12
13<!-- Searchbar with danger color -->
14<ion-searchbar color="danger"></ion-searchbar>
15
16<!-- Searchbar with value -->
17<ion-searchbar value="Ionic"></ion-searchbar>
18
19<!-- Searchbar with telephone type -->
20<ion-searchbar type="tel"></ion-searchbar>
21
22<!-- Searchbar with numeric inputmode -->
23<ion-searchbar inputmode="numeric"></ion-searchbar>
24
25<!-- Searchbar disabled -->
26<ion-searchbar disabled="true"></ion-searchbar>
27
28<!-- Searchbar with a cancel button and custom cancel button text -->
29<ion-searchbar showCancelButton="focus" cancelButtonText="Custom Cancel"></ion-searchbar>
30
31<!-- Searchbar with a custom debounce -->
32<ion-searchbar debounce="500"></ion-searchbar>
33
34<!-- Animated Searchbar -->
35<ion-searchbar animated></ion-searchbar>
36
37<!-- Searchbar with a placeholder -->
38<ion-searchbar placeholder="Filter Schedules"></ion-searchbar>
39
40<!-- Searchbar in a Toolbar -->
41<ion-toolbar>
42  <ion-searchbar></ion-searchbar>
43</ion-toolbar>

1 filterItems(searchTerm) {
2    return this.items.filter(item => {
3      return item.title.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
4    });
5  }