离子搜索栏中的清除文本答案

【问题标题】：Clear text in ion-searchbar离子搜索栏中的清除文本
【发布时间】：2017-01-02 06:33:53
【问题描述】：

我有一个搜索栏

<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

【问题讨论】：

标签： javascript html angularjs ionic-framework ionic2

【解决方案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);

【讨论】：

仅仅重置输入字段就需要做很多工作。不幸的是我没有找到一个简单的方法
在 ionic 3 上运行良好

【解决方案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)="..." 事件。

【讨论】：

您好，感谢您的建议，但我收到此 ts 错误：[ts] Property 'value' does not exist on type 'EventTarget'. any
嗯，但 plunker 中没有发生该错误，对吧？您能否检查一下您的代码是否与 plunker 中的代码有所不同？（只是 html 代码中的搜索栏）。或者也许尝试在 plunker 中复制该错误，以便我可以查看并查看将哪种事件发送到该方法...
嗨 sebaferreras，我正在使用可能被视为 hack 的东西。我正在获取 htmlelement 并单击搜索取消按钮。
您使用该 hack 解决的问题是否也发生在 plunker 中？必须有更好的方法来处理这种情况，但我需要在那里复制它来看看它
谢谢。我目前正忙于其他工作，但如果有机会，我会尝试让它在 plunker 上运行。

【解决方案3】：

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

@ViewChild('userSearchBar') searchbar: Searchbar;

然后在你的方法中：

this.searchbar._value='';

这就像一个魅力......

【讨论】：

【解决方案4】：

ion-searchbar 有一个名为ionClear的事件

(ionClear)="onClear($event)"

然后执行 ts 文件中的任何逻辑。

【讨论】：

【解决方案5】：

适用于 ionic 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;

【讨论】：

【解决方案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 = '';
});

【讨论】：

【解决方案7】：

你在使用 Angular，不是吗？

因此您只需在控制器中清除关联的模型“searchQuery”。这样，angular会自动清场；

this.searchQuery = '';

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

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

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

并将您的搜索对象更改为：

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

【讨论】：

您好 Diogo，感谢您的建议。我使用的是基于 Angular 2 构建的 Ionic 2。但是，我设置了 this.searchQuery = '';，它确实清除了搜索结果，但搜索栏中的实际文本值仍然存在。我的问题是，如何清除用户在搜索栏中输入的文本值？
您确定文本不是来自输入字段自动完成吗？
嗨，对不起，我不明白？我的html代码和我上面贴的代码一模一样。
我添加了更多代码示例。如果您需要更多信息，请告诉我
奇怪....我用正常输入进行了测试，它可以工作plnkr.co/edit/AqE9PYReiYGdgFeCsBe5?p=preview

【解决方案8】：

我的答案建立在 DJ 给出的答案之上。我只是对他的回答做出回应，但我没有足够的声誉。所以，我会自己回答。

为了让 clearInput() 函数工作。您需要向它传递一个事件实例。

最好的方法是存储在将函数与输出事件相关联时传入的事件对象，例如(ionInput)="myfunction($event)"。然后只需将其传递给 clearInput 函数。如果你输入null，它会返回一个类似Cannot find property 'target' of null的错误。

例子：

myFunction(event) {
    this.eventInstance = event;

    //the rest of your code
}

【讨论】：