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 serveHow 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.