snippet search.html

<!-- DocSearch CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />

<!-- Search container - place this where you want the search bar -->
<div id="algoliaBar"></div>

<!-- DocSearch JS -->
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>

<script type="text/javascript">
docsearch({
    appId: "8IRYFS0A94",
    apiKey: "f0be2c93fea1bdaf08c557853b8792ab",
    indexName: "civapicom",
    container: "#algoliaBar",
    debug: false,
    transformItems(items) {
        return items.map((item) => {
            const yearContent = item._highlightResult.year.value;

            if (!item._highlightResult || !item._highlightResult.tree_breakdown) {
                return { ...item, content: yearContent };
            }

            let treeBreakdown = item._highlightResult.tree_breakdown.value;
            treeBreakdown = treeBreakdown.replace(/Autodesk\.Civil\./g, "").trim();

            const newContent = treeBreakdown !== "" 
                ? `${yearContent} | ${treeBreakdown}` 
                : yearContent;

            return {
                ...item,
                content: newContent,
            };
        });
    },
    maxResultsPerGroup: 20,
    initialQuery: "2026 ",
})
</script>