搜索栏 - 搜索"回车"键

Question

我对Ionic框架很陌生。
按照文档，我创建了一个这样的搜索栏：

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

ionInput 当搜索栏输入已更改（包括清除）时。

这按预期工作。

但是，我想要不同的行为。我不想每次输入更改时都触发search($event)，但是例如，我找不到当用户点击"Enter"键或单击按钮时发出的输出事件。

这种行为有解决方案吗？

Answer 1

您应该能够将 Angular 2 键绑定添加到元素中，例如 keyup 和 click

模板：

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

组件 TS：

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

Answer 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 事件进行搜索，而不仅仅是隐藏键盘。

Answer 3

我能够捕获"Enter"键单击或"搜索"键单击(search)输出事件

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

Answer 4

只是为了补充@daniel-rubambura的答案。

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

.HTML

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

.ts

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