@acpaas-ui-widgets/ngx-search 中文文档教程

Question

Search Smart Widget UI (Angular)

这是智能小部件的 Angular 6+ UI，实现了带有建议的搜索栏。 它与 相应的后端服务 匹配，在远程模式下运行它时需要该服务。

有一个演示应用程序，请参阅下面的运行说明。

How to use

Installing

> npm install @acpaas-ui-widgets/ngx-search

Using

BFF 服务应该正在运行（请参阅下面的演示应用程序说明以了解如何启动一个）。

在您的模块中导入组件：

@NgModule({
  imports: [
    ...,
    SearchWidgetModule
  ],
  ...
})

在 index.html 中，包括核心品牌样式表：

<link rel="stylesheet" href="https://cdn.antwerpen.be/core_branding_scss/3.0.3/main.min.css">

对于仍在使用 Angular 5 的项目，我们是 维护一个 v1 分支，如果需要，它仍然会收到错误修复。

> npm install @acpaas-ui-widgets/ngx-search@"<2.0.0"

In your template:

<aui-search url="http://localhost:4200/suggestions.json"></aui-search>

（替换 BFF 服务的 url。）

Supported attributes

• method: POST or a GET method to get suggestions (default: GET)
• language: Language of the query suggestions
• url: (Api) Url to provide suggestions for a search
• placeholder: Specify the text to show in an empty field (default: empty)
• searchValue: The results comes in an array with type SearchWidgetValue
• suggestions: The full results array of the remote suggestions (default: string[])
• searchIncentiveText: The message shown when the user focuses on the input field
• minCharacters: Minimal characters to search in the results (default: 2)
• noResultsText: Text when the results are empty
• loadingText: Text when loading the results
• label: If SearchWidgetValue is an object add label to show
• query: This is the value of the searchwidget
• limit: Give a limit for suggestions per page
• iconLeft: Change the location of searchbox (default: false)

Events

• search: The event fired when the search is triggered

支持服务实现以下协议：

• POST /path/to/endpoint with raw body object:
• query: the value of search
• language: the language of the search

示例：

  {
    "query":"Aank",
    "language":"NL" 
  }

• suggestions = JSON-encoded array of SearchWidgetValue objects

CSS 示例：

/* Changing the color of the searchbox: */
.aui-search .aui-search-icon{
    background-color: $green;
} 

Run the demo app

> npm install
> npm start

浏览到 localhost:4200

以使用示例应用程序，您还需要启动相应的后端服务。

Contributing

我们欢迎您的错误报告和拉取请求。

请参阅我们的贡献指南。

License

该项目根据 MIT 许可发布。