@acpaas-ui-widgets/ngx-search

Search Smart Widget UI package (Angular)

Usage no npm install needed!

<script type="module">
  import acpaasUiWidgetsNgxSearch from 'https://cdn.skypack.dev/@acpaas-ui-widgets/ngx-search';
</script>

README

Search Smart Widget UI (Angular)

This is the Angular 6+ UI for a Smart Widget implementing a search bar with suggestions. It is matched by a corresponding back-end service which is needed when running it in remote mode.

screenshot

There is a demo app, see below for instructions on running it.

How to use

Installing

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

Using

A BFF service should be running (see demo app instructions below for how to start one).

Import the component in your module:

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

In the index.html, include the core branding stylesheet:

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

For projects that are still using Angular 5, we are maintaining a v1 branch, which will still receive bug fixes if needed.

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

In your template:

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

(Replace the url of the BFF service.)

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

The backing service implements the following protocol:

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

Example:

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

CSS examples:

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

Run the demo app

> npm install
> npm start

Browse to localhost:4200

To use the example app, you will need to have also started the corresponding back-end service.

Contributing

We welcome your bug reports and pull requests.

Please see our contribution guide.

License

This project is published under the MIT license.