@fluid-topics/ft-search-bar
v1.1.100
Published
Search bar component using Fluid Topics public API
Downloads
1,661
Readme
A search bar component using Fluid Topics public API.
The search bar requires the Fluid Topics public API and Material Icon font to be imported independently.
Install
Javascript
npm install @fluid-topics/ft-search-bar
yarn add @fluid-topics/ft-search-barHTML
To be placed at the end of HTML body:
<script src="https://cdn.jsdelivr.net/npm/@fluid-topics/public-api/dist/fluidtopics.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fluid-topics/ft-search-bar/build/ft-search-bar.min.js"></script>Usage
Lit
import { html } from "lit"
import "@fluid-topics/public-api/dist/fluidtopics.min.js"
import "@fluid-topics/ft-search-bar"
function render() {
return html`
<ft-search-bar
baseUrl="http://doc.fluidtopics.com"
.displayedFilters=${ [ "Version_FT", "Category", "Platform", "audience" ] }
@change=${ (e: SearchStateChangeEvent) => console.log("Search state change:", e.detail) }
@launch-search=${ (e: LaunchSearchEvent) => console.log("Launch search:", e.detail) }
></ft-search-bar>
`
}HTML
<html lang="en">
<head>
<title>My custom integration</title>
<link href="http://doc.fluidtopics.com/api/stylesheets/fonts.css" rel="stylesheet">
<link href="http://doc.fluidtopics.com/api/stylesheets/theme.css" rel="stylesheet">
</head>
<body>
<ft-search-bar
baseUrl="http://doc.fluidtopics.com"
displayedfilters="["Version_FT","Category","Platform","audience"]"
></ft-search-bar>
<script src="https://cdn.jsdelivr.net/npm/@fluid-topics/public-api/dist/fluidtopics.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fluid-topics/ft-search-bar/build/ft-search-bar.min.js"></script>
<script>
const searchBar = document.querySelector('ft-search-bar');
searchBar.setAttribute("labels", JSON.stringify({
filtersButton: "Refine your search",
inputPlaceHolder: "Search our documentation"
}));
searchBar.addEventListener("launch-search", event => {
console.log("Launch search:", event.detail)
console.log("URL:", searchBar.searchRequestSerializer(event.detail))
});
</script>
</body>
</html>