Added search suggestion capabilities for nbsearch

[WLun001]

input event will trigger on every keystroke, therefore other developer can handle it and provide search suggestion as the user is typing.

Demo on http://localhost:4200/#/search/search-event.component

Please read and mark the following check list before creating a pull request:

• I read and followed the CONTRIBUTING.md guide.
• I read and followed the New Feature Checklist guide.

Short description of what this resolves:

Added search suggestion capabilities, that will emit event on every keystroke.
This can be handle by developers like this: https://angular.io/tutorial/toh-pt6#search-by-name

[codecov]

Codecov Report

Merging #1038 into master will increase coverage by 0.67%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #1038      +/-   ##
==========================================
+ Coverage   81.16%   81.84%   +0.67%     
==========================================
  Files         232      232              
  Lines        7057     7067      +10     
  Branches      599      599              
==========================================
+ Hits         5728     5784      +56     
+ Misses       1153     1104      -49     
- Partials      176      179       +3

Impacted Files	Coverage Δ
...ramework/theme/components/search/search.service.ts	84% <100%> (+29%)	⬆️
...mework/theme/components/search/search.component.ts	79.48% <100%> (+33.05%)	⬆️
...mework/theme/components/layout/layout.component.ts	75.7% <0%> (+1.69%)	⬆️
src/framework/theme/services/theme.service.ts	97.61% <0%> (+4.76%)	⬆️

[yggg]

Hi @WLun001. Thanks a lot for the PR!

Let's add a new @Output input for input event in NbSearchFieldComponent instead of changing submitSearch behavior. This way we wouldn't break search API and users won't have to change their code after updating.

Also, please revert package-lock.json changes.

[WLun001]

Hi @yggg

Do you have any idea where should the search suggestion to be displayed if other developer used it?
Currently the animated searches are taking whole screen, if the suggestion appears on their page (for example, layout rotate search will push their page downwards), would be kinda weird.

[yggg]

Hi @WLun001. Unfortunately, there is no way to customize search screen.
As a workaround, you can create custom search components by extending NbSearchFieldComponent and NbSearchComponent and copying their templates. Then modify NbSearchFieldComponent template to have not only input but also search suggestions. Something like this:

@Component({
  selector: 'custom-search-field',
  // copied and modified template of NbSearchFieldComponent
  template: `
    ...
      <input #searchInput />
      <ul #options>...</ul>
    ...
  `,
})
class CustomSearchFieldComponent extends NbSearchFieldComponent {}

@Component({
  selector: 'custom-search-field',
  // template of NbSearchComponent. replace nb-search-field with custom-search-field
  template: `...`,
})
class CustomSearchComponentComponent extends NbSearchComponent {}

[yggg]

@WLun001 Thanks for addressing review comments. Please, take a look at new ones. There are just a few left.
And thank you a lot for docs example as well!

[nnixaa]

unnecessary empty line

[yggg]

Removed in f5d96dc