Skip to content
Snippets Groups Projects
user avatar
authored

Kldb Search box component

<kldb-search-box> displays a search box similar to the one you could find on your knowledge base instance.

Warning This component is used to filter results of another component : <kldb-search-results>. You need to implement both components and link them with a script.

When we made this component we thought that it was relevant to separate it in two parts : the filters and the results in order to get more freedom in the implementation. So we've added a script to link them. We are looking for a smarter solution. If you have any suggestions for improvement, we would be happy to hear from you :)

Try the demo

To launch the demo, please run at the root of the component :

npm run serve

How to use

<html>
<head>
  <!-- import the Kldb Search Box component -->
  <script type="module" src="https://unpkg.com/@startinblox/kldb-search-box"></script>
  <!-- import the Kldb Result Search component -->
  <script type="module" src="https://unpkg.com/@startinblox/kldb-search-results"></script>
  <!-- import the script to connect the two components -->
  <script src="https://unpkg.com/@startinblox/kldb-search-box@0.1.1/js/connector-script.js"></script>
</head>

<body>
  <!-- Use Kldb Search Box component -->
  <kldb-search-box
    data-src="[url]">
  </kldb-search-box>

  <!-- Use Kldb Result Search component -->
  <kldb-search-results
    data-src="[url]">
  </kldb-search-results>
</body>
</html>

Parameters

Name Default Description
data-src undefined URL of source to display. For exemple : https://api.coopstarter.happy-dev.fr

Notes

This component was made for The Coopstarter projet by Balessan and Alice.