@acknow-srl/search 中文文档教程

Question

Search

创建用于过滤数据的输入字段。 您可以使用实时搜索（在键入时）或提交搜索（按 Enter 键或单击搜索按钮）。

AckSearch (Component)

Selector

确认搜索

Input

• typing (boolean): true if the component has to emit the search event while typing (real-time search). Set to false for submit search (search event is emitted when you press Enter key or click on the search button). The CSS class ack-search-typing is set for the component if this property is true. Otherwise, the CSS class ack-search-submit is set. Default: true.
• placeholder (string): HTML placeholder for the field. Default: ''.
• disabled (boolean): true to make the field disabled. Default: false.
• size (number): HTML size for the field. The component CSS ignores this value and set the field width 100% of its parent element. You can overwrite the component CSS by you own one and adjust the size value manually. Default: 20.
• value (string): current value for the search field. Default: ''.
• icon (string): icon name for the search button. Default: icon-search-a.
• searchButton (string): text (set as title attribute) for search button. Default: Search.
• cancelButton (string): text (set as title attribute) for reset button. Default: Cancel.

Events

• search (string): in real-time search, it is emitted on every key press. If you search by submit, it is emitted when you press the search button or the Enter key. During component initialization, it is always emitted. It holds the current field value.

Example

/**
 * 1. Import the module in your main module (usually app.module.ts).
 */

import { AckSearchModule } from '@acknow-srl/search';

/**
 * 2. Add the module to your app imports.
 */

@NgModule({
  declarations: [
    AppComponent
    ...
  ],
  imports: [
    ...
    AckSearchModule,
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

/**
 * 3. Use the component in your HTML.
 */

<ack-search placeholder="Search everything..." (search)="myHandlerFunc($event)"></ack-search>