搜索栏 - 搜索“输入”键

Question

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

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

  

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

这可以按预期工作。

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

这种行为是否有解决方案？

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

我能够通过(search)输出事件捕获“ Enter”键单击或“ search”键单击

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