I have a search bar

<div id="search"><ion-searchbar [(ngModel)]="searchQuery" (change)="onChange($event)" (ionClear)="onCancel($event)" (ionInput)="onInput($event)" debounce="1"></ion-searchbar></div>

How do I, from the ts file clear the text the user has entered?

Here is the ts file function that tries to clear the search bar text.

.
private searchQuery: string = null;
.

  subscribeEvents() {
    this.events.subscribe('mapFilter:update', (data) => {
      this.employeeModel = data[0].employeeModel;
      if (data[0].fromClearFilters) {
        this.searchQuery = '';
      }
      this.getMarkers();
      this.getPosition();
    });
  }

this.searchQuery = ''; does reset the filter but the text remains

Thanks

I am using Ionic 2

I have a search bar

<div id="search"><ion-searchbar [(ngModel)]="searchQuery" (change)="onChange($event)" (ionClear)="onCancel($event)" (ionInput)="onInput($event)" debounce="1"></ion-searchbar></div>

How do I, from the ts file clear the text the user has entered?

Here is the ts file function that tries to clear the search bar text.

.
private searchQuery: string = null;
.

  subscribeEvents() {
    this.events.subscribe('mapFilter:update', (data) => {
      this.employeeModel = data[0].employeeModel;
      if (data[0].fromClearFilters) {
        this.searchQuery = '';
      }
      this.getMarkers();
      this.getPosition();
    });
  }

this.searchQuery = ''; does reset the filter but the text remains

Thanks

I am using Ionic 2

• javascript
• html
• angularjs
• ionic-framework
• ionic2

8 Answers 8

First, add an identifier to your HTML element

<ion-searchbar #mySearchbar ...>

Then, import ViewChild:

import { ViewChild } from '@angular/core';

Then, import Searchbar

import { Searchbar } from 'ionic-angular';

Add it as a property:

@ViewChild('mySearchbar') searchbar: Searchbar;

Then, fire the onInput event and pass a null identifier (so your onInput event listener knows its you)

this.searchbar.clearInput(null);

Workable Solution for ionic 5.4.16 & Angular 8.2.14 : Similar to DJ.'s answer, but for different version.

1.Your ion-searchbar with #mySearchbar tag

  <ion-searchbar #mySearchbar1 #q (keyup.enter)="navigateSearchPage(q.value)"  placeholder="Search Product Name" style="padding: 0 10px" ></ion-searchbar>

2.Import and place the following code

import {ViewChild} from '@angular/core';
import {IonSearchbar} from '@ionic/angular';

@ViewChild('mySearchbar', {static: false}) searchbar: IonSearchbar;

3.Clear the searchbar (place this code to the function that you will call to clear the searchbar.

this.searchbar.value = null;

Instead of using the ngModel in the search bar, you can just use the event sent to get the value like this:

<ion-searchbar (ionInput)="getItems($event)" (ionCancel)="onCancel($event)" [showCancelButton]="true"></ion-searchbar>

By doing that, you can clear the text in the (ionCancel) event by just doing:

  onCancel(ev) { 
    // Reset the field
    ev.target.value = '';
  }

Please notice that you don't need the ngModel binding and also you don't need to use the (change)="..." event.

Anyone who is interested, the way this worked for me is:

@ViewChild('userSearchBar') searchbar: Searchbar;

then in your method:

this.searchbar._value='';

This works like a charm...

ion-searchbar has a event called ionClear

(ionClear)="onClear($event)" 

and then do whatever the logic from ts file.

ion-searchbar has a method getInputElement which returns the native element, as It returns a promise so do it like this and then ion-searchbar will be cleared.

//tested in Ionic ver 4.7.1 and working fine. 
document.querySelector('ion-searchbar').getInputElement().then((searchInput) => {
   searchInput.value = '';
});

Are you using Angular, aren´t you?

So you only have to clear the associated model "searchQuery" in controller. This way, angular will automatically clear the field;

this.searchQuery = '';

But ng-model should be bound to an object and not to an variable.

The means the the declaration of the variable should be something like:

 $scope.searchBox = {
    searchQuery: ''
 };

And change your search object to:

<ion-searchbar ... ng-model="searchBox.searchQuery" ... />

My answer builds on the answer DJ gave. I would just make this a response to his answer, but I don't have enough reputation. So, I'll make an answer of my own.

In order to get the clearInput() function to work. You need to pass it an event instance.

The best way to get this is to store the event object that gets passed in when you associate a function with an output event, something like (ionInput)="myfunction($event)". Then just pass this into the clearInput function. If you put null, it will return an error like Cannot find property 'target' of null.

Example:

myFunction(event) {
    this.eventInstance = event;

    //the rest of your code
}