Question

我有一个搜索栏

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

如何从ts文件中清除用户输入的文本？

这是尝试清除搜索栏文本的ts文件函数。

.
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 = '';会重置过滤器，但文字仍为

由于

我正在使用Ionic 2

Answer 1

首先，为HTML元素添加标识符

<ion-searchbar #mySearchbar ...>

然后，导入 ViewChild ：

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

然后，导入搜索栏

import { Searchbar } from 'ionic-angular';

将其添加为属性：

@ViewChild('mySearchbar') searchbar: Searchbar;

然后，触发onInput事件并传递一个空标识符（这样你的 onInput 事件监听器就知道你了）

this.searchbar.clearInput(null);

Answer 2

您可以使用发送的事件来获取如下所示的值，而不是使用搜索栏中的ngModel：

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

通过这样做，您可以通过以下方式清除(ionCancel)事件中的文本：

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

请注意，您不需要ngModel绑定，也不需要使用(change)="..."事件。

Answer 3

任何有兴趣的人，这对我有用的方式是：

@ViewChild('userSearchBar') searchbar: Searchbar;

然后在你的方法中：

this.searchbar._value='';

这就像魅力......

Answer 4

您使用的是Angular，不是吗？

所以你只需要在控制器中清除相关的模型“searchQuery”。这样，角度将自动清除该字段;

this.searchQuery = '';

但是ng-model应该绑定到一个对象而不是一个变量。

这意味着变量的声明应该是这样的：

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

将搜索对象更改为：

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

Answer 5

我的答案基于DJ给出的答案。我只是对他的回答做出回应，但我的声誉不高。因此，我将自己回答。

为了使clearInput（）函数起作用。您需要将事件实例传递给它。

获得此结果的最佳方法是存储将函数与输出事件相关联时传递的事件对象，例如(ionInput)="myfunction($event)"。然后将其传递给clearInput函数。如果您将其设置为null，它将返回类似Cannot find property 'target' of null的错误。

示例：

myFunction(event) {
    this.eventInstance = event;

    //the rest of your code
}

Answer 6

ion-searchbar有一个方法getInputElement，该方法返回本机元素，因为它返回了promise，所以要这样做，然后ion-searchbar将被清除。

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

Answer 7

ion-searchbar有一个名为ionClear

的事件

(ionClear)="onClear($event)"

然后执行ts文件中的所有逻辑。

Answer 8

适用于离子5.4.16和Angular 8.2.14的可行解决方案：与DJ。的答案类似，但适用于不同的版本。

1。您的带有 #mySearchbar 标签的离子搜索栏

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

2。导入并放置以下代码

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

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

3。清除搜索栏（将此代码放置在您将要调用的函数上，以清除搜索栏。

this.searchbar.value = null;

离子搜索栏中的明文

8 个答案: