Options
All
  • Public
  • Public/Protected
  • All
Menu

haupia.js

haupia.js

This library allows you to create a search results page with little effort. Search, auto-complete, faceting and pagination functions are provided.

Learn more about haupia in the official documentation.

Release Notes

Deutsch

English

Install

npm install haupia.js

Usage


import {haupia} from 'haupia.js'

Below are minimal examples of how to use the functionalities. For more details please open the API documentation.

// basic example
const url = "https://my.haupia.backend";
const preparedSearch = "Homepage";

const fsss = new haupia(url, preparedSearch);
// searching
const page: Page = await fsss.search("Example query");
const pageRenderer = fsss.getPageRenderer(page)
pageRenderer.renderSearchResultsToHTMLElement(document.getElementById("searchResultContainer"));
// autocomplete
const options: HaupiaOptions = {
    autocompleteHighlighting: true,
    autocompleteLanguage: "en",
    autocompletePrefixThreshold: 3
}
const fsss = new haupia(url, preparedSearch, options);
fsss.attachAutocompleteWidget(document.getElementById("search-bar"));
// pagination
const page: Page = await fsss.search("Example query");
const pageRenderer = fsss.getPageRenderer(page)
pageRenderer.renderPaginationToHTMLElement(document.getElementById("paginationContainer"), 5);
const paginationButtons = document.getElementsByClassName("haupia-pagination")[0].children

for(let button of paginationButtons){
    button.addEventListener("click",  async (event: Event) => {
        const clickedButton = event.currentTarget as HTMLElement
        const pageNumber = Number(clickedButton.getAttribute("haupia-page-value") || "0")
        const page = await searchResultPage.getPage(pageNumber)
        renderSearchResults(page)
    })
}
// faceting
const page: Page = fsss.search("Example query");
const facetName = "language" //name of the facet as displayed in haupia cockpit
if (page.facets) {
    const facets: Facet = page.getFacet(facetName)
    facets.counts.forEach(count => {
        // ... a count is a value that can be used to filter the search result
    })
}
const filteredPage = await facet.filter(... selectedCounts)
// custom html for search results
const page: Page = await fsss.search("Example query")
const pageRenderer = fsss.getPageRenderer(page)
pageRenderer.searchResultTemplate.templateFunction = (data: Result, highlighting: Highlighting) => {
    const template = `
        <a href="${data.link}">
            <h1>${data.title}</h1>
            <img class="search-result-image" src="${data.thumb}" alt="${data.alt}>
            <p>${highlighting.content}</p>
        </a>
    `
    return template
}
// custom html for pagination
const pageRenderer = fsss.getPageRenderer(page)
pageRenderer.paginationTemplate.renderNext = (value: string) => {
    return `<strong>${value}</strong>`
}
pageRenderer.renderNextButtonToHTMLELement(target)
//yields <li><strong>Next</strong></li>

Generated using TypeDoc