Clear text in ion-searchbar

Ionic Framework ionic-v3
1

Hi all,

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?

Thanks

I am using Ionic 2

also see

2

Try set searchbar component’s value to ‘’, read http://ionicframework.com/docs/v2/api/components/searchbar/Searchbar/

3

Hi itlr, thanks for the reply.

How do I set the value to ‘’?

I have tried the following with no success:

this.searchQuery = '';

I have tried:

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

and

 var htmlElement: HTMLElement = document.getElementById("ion-searchbar");
 htmlElement.nodeValue = '';

and

   htmlElement.setAttribute('value', '');

and

   htmlElement.setAttribute('ng-reflect-model', '');

But the values does not clear

Because I have done this.searchQuery = '';, when I focus on the search bar, it clears. So this makes me think that the problem is it is not refreshing to show the new value.

2 Likes
4

BUMP - Does anyone have an answer to this?

In the browser, setting the ngModel value to ‘’ clears the search bar, but running on an Android device the value doesn’t get cleared from the searchbar.

Is there a way to clear the searchbar programmatically?

5

Changing it through the associated model value - this.searchQuery = ''; - works for me. Are you sure you are within Angular’s context, or are you missing a this.zone.run(() => { ... }); ?

1 Like
6

Thanks Michael - not sure what a this.zone,run(() => {…}) I haven’t come across that before?

I did manage to get it to clear on an Android device by setting the “value” property of the control, rather than the ngModel value.

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

export class ScanBarcodePage {
  @ViewChild('bluetoothControl') bluetoothControl: Searchbar;   
  // to set focus on the bluetoothControl and clear the control

          this.bluetoothValue = '';  // this clears the model value
          this.bluetoothControl.value = ''; // this clears the control value
7

That’s interesting, glad it works for you. Just so you’re aware of the zone.run issue, which I run into quite often because of third party library callbacks:

If you are familiar with angular 1, then this.zone.run() is the equivalent of $scope.apply(). It’s an execution context that angular is aware of. Example: If you do window.setTimeout(() => { this.foo = 3; });, then {{foo}} will not show up as 3 in the template because angular 2 is not aware of the variable having changed because you switched contexts by using a timeout. Running zone.run() makes sure that angular knows about you running some code that would otherwise be outside of angular’s context.

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);

3 Likes
9

do you know what parameters clearinput() takes?
I searched and have only seen it used with clearinput(null)?