docs(searchbar): debounce uses ionInput (#2913)

Co-authored-by: guillaumesmo <[email protected]>

docs/api/searchbar.md

@@ -66,7 +66,7 @@ import Toolbar from '@site/static/usage/v7/toolbar/searchbars/index.md';
 
 ## Debounce
 
-A debounce can be set on the searchbar in order to delay triggering the `ionChange` event. This is useful when querying data, as it can be used to wait to make a request instead of requesting the data each time a character is entered in the input.
+A debounce can be set on the searchbar in order to delay triggering the `ionInput` event. This is useful when querying data, as it can be used to wait to make a request instead of requesting the data each time a character is entered in the input.
 
 import Debounce from '@site/static/usage/v7/searchbar/debounce/index.md';
 

static/usage/v7/searchbar/debounce/angular/example_component_html.md

@@ -1,5 +1,5 @@
 ```html
-<ion-searchbar [debounce]="1000" (ionChange)="handleChange($event)"></ion-searchbar>
+<ion-searchbar [debounce]="1000" (ionInput)="handleInput($event)"></ion-searchbar>
 
 <ion-list>
   <ion-item *ngFor="let result of results">

static/usage/v7/searchbar/debounce/angular/example_component_ts.md

@@ -9,7 +9,7 @@ export class ExampleComponent {
   public data = ['Amsterdam', 'Buenos Aires', 'Cairo', 'Geneva', 'Hong Kong', 'Istanbul', 'London', 'Madrid', 'New York', 'Panama City'];
   public results = [...this.data];
 
-  handleChange(event) {
+  handleInput(event) {
     const query = event.target.value.toLowerCase();
     this.results = this.data.filter(d => d.toLowerCase().indexOf(query) > -1);
   }

static/usage/v7/searchbar/debounce/demo.html

@@ -36,9 +36,9 @@
   let results = [...data];
   filterItems(results);
 
-  searchbar.addEventListener('ionChange', handleChange);
+  searchbar.addEventListener('ionInput', handleInput);
 
-  function handleChange(event) {
+  function handleInput(event) {
     const query = event.target.value.toLowerCase();
     results = data.filter(d => d.toLowerCase().indexOf(query) > -1);
     filterItems(results);
@@ -61,4 +61,4 @@
   }
 </script>
 
-</html>
+</html>

static/usage/v7/searchbar/debounce/javascript.md

@@ -10,9 +10,9 @@
   let results = [...data];
   filterItems(results);
 
-  searchbar.addEventListener('ionChange', handleChange);
+  searchbar.addEventListener('ionInput', handleInput);
 
-  function handleChange(event) {
+  function handleInput(event) {
     const query = event.target.value.toLowerCase();
     results = data.filter(d => d.toLowerCase().indexOf(query) > -1);
     filterItems(results);

static/usage/v7/searchbar/debounce/react.md

@@ -6,7 +6,7 @@ function Example() {
   const data = ['Amsterdam', 'Buenos Aires', 'Cairo', 'Geneva', 'Hong Kong', 'Istanbul', 'London', 'Madrid', 'New York', 'Panama City'];
   let [results, setResults] = useState([...data]);
 
-  const handleChange = (ev: Event) => {
+  const handleInput = (ev: Event) => {
     let query = "";
     const target = ev.target as HTMLIonSearchbarElement;
     if (target) query = target.value!.toLowerCase();
@@ -16,7 +16,7 @@ function Example() {
 
   return (
     <>
-      <IonSearchbar debounce={1000} onIonChange={(ev) => handleChange(ev)}></IonSearchbar>
+      <IonSearchbar debounce={1000} onIonInput={(ev) => handleInput(ev)}></IonSearchbar>
 
       <IonList>
         { results.map(result => (

static/usage/v7/searchbar/debounce/vue.md

@@ -1,6 +1,6 @@
 ```html
 <template>
-  <ion-searchbar :debounce="1000" @ionChange="handleChange($event)"></ion-searchbar>
+  <ion-searchbar :debounce="1000" @ionInput="handleInput($event)"></ion-searchbar>
 
   <ion-list>
     <ion-item v-for="result in results">
@@ -22,7 +22,7 @@
       return { data, results };
     },
     methods: {
-      handleChange(event) {
+      handleInput(event) {
         const query = event.target.value.toLowerCase();
         this.results = this.data.filter(d => d.toLowerCase().indexOf(query) > -1);
       },