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.
Funding
This software has been co-funded by the European Union. The contents of this software are the sole responsibility of Cooperatives Europe and can in no way be taken to reflect the views of the European Union.