Theme:
SCSS TypeScript TypeScript

Suggest Search

The Suggest Search is designed to display search results. Various predefined search results and news are displayed before a user takes action by using a search field input. On change of this fields input the display of the suggest search changes by showing the desired results.

This component deals exclusively with the design of the Suggest Search. The connection to an Data API interface is not a part of this component. Therefore, the examples below are all provided with static HTML.

The design of the Suggest Search component only relates to the result search. The search field, which is required, is not an explicit part of the component. We deliberately opted for this structure so that the Suggest Search can be reused in different ways in several places. But you have to connect a used Suggest Search with a search field. This is done with the data attributes data-sg-suggest-search="UNIQUE_ID" and data-sg-suggest-search-input="UNIQUE_ID". The following code example shows how the suggest search can be connected to an input field via the data attribute. It is irrelevant where exactly the input field is located on the website.

<body>
  <header>
    <h1>Suggest Search Example</h1>
    <input class="input" data-sg-suggest-search-input="suggest-search-example" data-sg-tooltip-ref="suggest-search-tooltip">
  </header>
  <main>...</main>
  <div class="tooltip" data-sg-tooltip data-sg-tooltip-id="suggest-search-tooltip">
    <div class="suggest-search" data-sg-suggest-search="suggest-search-example">...</div>
  </div>
</body>

One can use multiple Suggest Searches on the website by using different values for the data attributes.

The display alternates between the predefined display (.suggest-search__template) and the users search results (.suggest-search__results) as soon as the user starts typing in the search field. It is up to the developer who wants to use this component to populate the user search results with real data. Since such an Ajax request usually takes a certain amount of time before the results can be displayed, an extra modifier .suggest-search--results-loading was created for the waiting time, which shows the user that the application is currently loading the data is. It is up to the developer to add and remove this block modifier accordingly.

In addition to the standard view of the Suggest Search, which usually has two columns, there is a narrow variant (with only one column), which can be used via the modifier .suggest-search--mobile.

The follow list explains all existing classes an modifier:

  • .suggest-search the block element
  • .suggest-search__headline the text as headline, can reuse on different positions, see examples
  • .suggest-search__top-ad an ad position below results and template, always shown
  • .suggest-search__template the template is shown when no query is typed in the input
  • .suggest-search__template-left the template is separated in left (example results) and right (news & ads)
  • .suggest-search__popular-search a list of popular results, hard coded
  • .suggest-search__most-searched a list of general most searched results, hard coded
  • .suggest-search__template-right the template is separated in left (example results) and right (news & ads)
  • .suggest-search__template-ad an ad that is only shown on desktop screens, above the news
  • .suggest-search__news some news in the template
  • .suggest-search__results a list of results
  • .suggest-search__result-group results mostly grouped, like in share, index, fonds…
  • .suggest-search__result a single instrument result of an ad
  • .suggest-search__result-link a link that has no style effects
  • .suggest-search__result-description the name of the instrument or the content of the an ad
  • .suggest-search__result-identifier the wkn/isin of the instrument
  • .suggest-search__result-favorite should be a link to add the instrument to the users depot
  • .suggest-search--show-results shows the results and hides the templates, the modifier is set by StyleGuide scripting
  • .suggest-search--results-loading show a loading animation, this modifier must be set be the user if the StyleGuide
  • .suggest-search__result--no-identifier hides the identifier, can be combined with .suggest-search__result--no-favorite
  • .suggest-search__result--no-favorite hides the favorite, can be combined with .suggest-search__result--no-identifier
  • .suggest-search__result--ad the result is an ad, the content of the result must set by the user of the StyleGuide
  • .suggest-search__result--mark marks a result, will be set be StyleGuide scripting

Their are view JavaScript functions, that can use for marks a result:

  • styleGuide.suggestSearchHandler.mark(suggestSearch: SuggestSearch, index: number): ResultItem marks a result item in the given suggest search, zero-based index
  • styleGuide.suggestSearchHandler.markNext(suggestSearch: SuggestSearch): ResultItem marks the next result item
  • styleGuide.suggestSearchHandler.markPrevious(suggestSearch: SuggestSearch): ResultItem marks the previous result item
  • styleGuide.suggestSearchHandler.getMarked(suggestSearch: SuggestSearch): ResultItem returns the current marked result item

In the two examples below we show the two standard variants of how the Suggest Search is used.

In this variant, the Suggest Search is displayed in the Page Header on desktop screens within a Tooltip just below a Form Group.

Theme basic Screen size XL
html

In this variant, the Suggest Search is displayed in a Side Panel. The button to open the side panel is only displayed in the Page Header on mobile screens. The Form Group for search inputs is in the header of the side panel and can be customized as required using global modifiers.

Theme basic Screen size XL
html