搜索栏 - 搜索“输入”键答案

【问题标题】：Searchbar - search on 'enter' key搜索栏 - 搜索“输入”键
【发布时间】：2017-01-11 18:11:05
【问题描述】：

我对 Ionic 框架非常陌生。
在docs 之后，我创建了一个这样的搜索栏：

<ion-searchbar
      [(ngModel)]="searchQuery"
      [showCancelButton]="true"
      (ionInput)="search($event)">
</ion-searchbar>

ionInput 当搜索栏输入发生变化时，包括被清除。

这按预期工作。

但是我想要不同的行为。我不想在每次输入更改时触发search($event)，但是我找不到当用户点击“输入”键或单击按钮时发出的output event。

这种行为有解决办法吗？

【问题讨论】：

【解决方案1】：

您应该能够将 Angular 2 keyup 绑定添加到 keyup 和 click 等元素

模板：

<ion-searchbar #q
      [showCancelButton]="true"
      (keyup.enter)="search(q.value)">
</ion-searchbar>

组件 TS：

search(q: string) { 
    console.log(q); 
}

【讨论】：

【解决方案2】：

在使用 Angular 的 Ionic 5 中，您必须将 ion-searchbar 包装在这样的表单标签中：

<form (ngSubmit)="hideKeyboard()">
  <ion-searchbar (ionChange)="search($event)"></ion-searchbar>
</form>

在您的组件中使用电容器：

import { Plugins } from '@capacitor/core';
const { Keyboard } = Plugins;

...

hideKeyboard() {
  Keyboard.hide();
}

当然，您也可以使用 ngSubmit 事件进行搜索，而不仅仅是隐藏键盘。

【讨论】：

【解决方案3】：

我能够使用(search) 输出事件捕获“Enter”键单击或“搜索”键单击

<ion-searchbar
  (search)="search($event)">
</ion-searchbar>

【讨论】：

【解决方案4】：

只是添加到@daniel-rubambura 的答案。

您可以将ngModel 与(search) 结合使用来获取值。

HTML

<ion-searchbar 
showCancelButton="never"
[(ngModel)]="searchTerm"
(search)="testFunc()"
></ion-searchbar>

.ts

searchTerm: string;
testFunc(){
    console.log(this.searchTerm);
  }

【讨论】：