{"title":"Implement Search Functionality","description":"Add powerful client-side search to your content site with built-in indexing and FlexSearch","islands":{"content":"\u003Cheader class=\u0022transition-all mb-4 lg:mb-8\u0022\u003E\u003Ch1 class=\u0022font-display text-2xl lg:text-4xl font-bold tracking-tight text-base-900 dark:text-base-50\u0022\u003EImplement Search Functionality\u003C/h1\u003E\u003C/header\u003E\n\n\u003Cmain class=\u0022prose dark:prose-invert dark:text-base-300 max-w-full prose-sm md:prose-base min-w-0 prose-headings:scroll-m-18 prose-headings:font-display prose-headings:text-base-900 dark:prose-headings:text-base-50\u0022\u003E\u003Cp\u003EMyLittleContentEngine includes a built-in search system that automatically indexes your content and provides fast, client-side search functionality. The search system uses FlexSearch for high-performance searching with smart ranking and highlighting.\u003C/p\u003E\n\u003Ch2 id=\u0022how-search-works\u0022\u003EHow Search Works\u003C/h2\u003E\n\u003Cp\u003EThe search system consists of three main components:\u003C/p\u003E\n\u003Col\u003E\n\u003Cli\u003E\u003Cstrong\u003EServer-side Index Generation\u003C/strong\u003E: Automatically creates a JSON search index from all your content\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EClient-side Search Engine\u003C/strong\u003E: Uses FlexSearch to provide fast, fuzzy searching\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003ESearch UI\u003C/strong\u003E: Modal interface with keyboard shortcuts and result highlighting\u003C/li\u003E\n\u003C/ol\u003E\n\u003Ch3 id=\u0022architecture-overview\u0022\u003EArchitecture Overview\u003C/h3\u003E\n\u003Cdiv class=\u0022code-highlight-wrapper not-prose\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-container\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-highlight\u0022\u003E\n\u003Cpre\u003E\u003Ccode class=\u0022language-mermaid code\u0022\u003E\u003Cspan class=\u0022line\u0022\u003Egraph TD\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    A[Content Services] --\u0026gt; B[SearchIndexService]\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    B --\u0026gt; C[search-indexjson]\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    C --\u0026gt; D[FlexSearch Engine]\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    D --\u0026gt; E[Search Results UI]\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    F[User Types Query] --\u0026gt; D\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    G[Ctrl\u002BK Shortcut] --\u0026gt; E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    H[Search Button Click] --\u0026gt; E\u003C/span\u003E\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\n\u003Cp\u003E\u003Cstrong\u003EContent Processing Flow:\u003C/strong\u003E\u003C/p\u003E\n\u003Col\u003E\n\u003Cli\u003EContent services (Markdown, API Reference) provide pages via \u003Ccode\u003EGetPagesToGenerateAsync()\u003C/code\u003E\u003C/li\u003E\n\u003Cli\u003E\u003Ccode\u003ESearchIndexService\u003C/code\u003E fetches each page\u0027s HTML and extracts searchable content\u003C/li\u003E\n\u003Cli\u003EContent is cleaned (code blocks removed), headings are extracted with priority levels\u003C/li\u003E\n\u003Cli\u003EA JSON index is generated at \u003Ccode\u003E/search-index.json\u003C/code\u003E with weighted content and search priorities\u003C/li\u003E\n\u003Cli\u003EClient-side FlexSearch loads the index and provides instant search results\u003C/li\u003E\n\u003C/ol\u003E\n\u003Ch2 id=\u0022prerequisites\u0022\u003EPrerequisites\u003C/h2\u003E\n\u003Cul\u003E\n\u003Cli\u003EMyLittleContentEngine site with content\u003C/li\u003E\n\u003Cli\u003E\u003Ccode\u003EMyLittleContentEngine.UI\u003C/code\u003E package installed\u003C/li\u003E\n\u003Cli\u003ESearch UI components added to your layout\u003C/li\u003E\n\u003C/ul\u003E\n\u003Ch2 id=\u0022implementation-steps\u0022\u003EImplementation Steps\u003C/h2\u003E\n\u003Cdiv class=\u0022mx-4\u0022\u003E\u003Col class=\u0022relative text-gray-500 border-l-2 border-base-200 dark:border-base-800 dark:text-base-400 list-none \u0022\u003E\u003Cli class=\u0022mb-10 \u0022\u003E\u003Cspan class=\u0022not-prose -start-3 lg:-start-4 absolute flex items-center font-display text-xs lg:text-base font-bold justify-center mt-0.5 lg:mt-0 w-6 h-6 lg:w-8 lg:h-8 bg-base-100 rounded-full ring-2 ring-base-300 dark:ring-base-800 dark:bg-base-900\u0022\u003E1\u003C/span\u003E\n    \n    \u003Ch2 id=\u0022add-required-packages\u0022\u003EAdd Required Packages\u003C/h2\u003E\n\u003Cp\u003EEnsure you have the UI package installed:\u003C/p\u003E\n\u003Cdiv class=\u0022code-highlight-wrapper not-prose\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-container\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-highlight\u0022\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-built_in\u0022\u003Edotnet\u003C/span\u003E add package MyLittleContentEngine.UI\u003C/span\u003E\n\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\n\u003Cp\u003EThe search functionality is automatically included with the UI package - no additional setup required.\u003C/p\u003E\n\u003C/li\u003E\u003Cli class=\u0022mb-10 \u0022\u003E\u003Cspan class=\u0022not-prose -start-3 lg:-start-4 absolute flex items-center font-display text-xs lg:text-base font-bold justify-center mt-0.5 lg:mt-0 w-6 h-6 lg:w-8 lg:h-8 bg-base-100 rounded-full ring-2 ring-base-300 dark:ring-base-800 dark:bg-base-900\u0022\u003E2\u003C/span\u003E\n    \n    \u003Ch2 id=\u0022add-search-ui-to-your-layout\u0022\u003EAdd Search UI to Your Layout\u003C/h2\u003E\n\u003Cp\u003EAdd a search input element to your layout with the \u003Ccode\u003Eid=\u0022search-input\u0022\u003C/code\u003E:\u003C/p\u003E\n\u003Cdiv class=\u0022code-highlight-wrapper not-prose\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-container\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-highlight\u0022\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E\u0026lt;\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003Ebutton\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E \u003C/span\u003E\u003Cspan class=\u0022hljs-attr\u0022\u003Etype\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E=\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003Ebutton\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E \u003C/span\u003E\u003Cspan class=\u0022hljs-attr\u0022\u003Eid\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E=\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003Esearch-input\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E \u003C/span\u003E\u003Cspan class=\u0022hljs-attr\u0022\u003Eclass\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E=\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003Ew-full rounded-md\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E\u0026gt;\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    Search documentation...\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E\u0026lt;/\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003Ebutton\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E\u0026gt;\u003C/span\u003E\u003C/span\u003E\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\n\u003Cp\u003EThe search system will automatically:\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003EGenerate a search modal when the input is clicked\u003C/li\u003E\n\u003Cli\u003EEnable \u003Ccode\u003ECtrl\u002BK\u003C/code\u003E keyboard shortcut\u003C/li\u003E\n\u003Cli\u003EProvide search results with highlighting\u003C/li\u003E\n\u003C/ul\u003E\n\u003C/li\u003E\u003Cli class=\u0022mb-10 \u0022\u003E\u003Cspan class=\u0022not-prose -start-3 lg:-start-4 absolute flex items-center font-display text-xs lg:text-base font-bold justify-center mt-0.5 lg:mt-0 w-6 h-6 lg:w-8 lg:h-8 bg-base-100 rounded-full ring-2 ring-base-300 dark:ring-base-800 dark:bg-base-900\u0022\u003E3\u003C/span\u003E\n    \n    \u003Ch2 id=\u0022include-scripts-and-base-url\u0022\u003EInclude Scripts and Base URL\u003C/h2\u003E\n\u003Cp\u003EIn your \u003Ccode\u003EApp.razor\u003C/code\u003E, ensure you have the required scripts and base URL configuration:\u003C/p\u003E\n\u003Cdiv class=\u0022code-highlight-wrapper not-prose\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-container\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-highlight\u0022\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E\u0026lt;\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003Ehead\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E\u0026gt;\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-comment\u0022\u003E\u0026lt;!--\u003C/span\u003E\u003Cspan class=\u0022hljs-comment\u0022\u003E Other head content \u003C/span\u003E\u003Cspan class=\u0022hljs-comment\u0022\u003E--\u0026gt;\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E    \u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E\u0026lt;\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003Escript\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E \u003C/span\u003E\u003Cspan class=\u0022hljs-attr\u0022\u003Esrc\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E=\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E@LinkService.GetLink(\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E/_content/MyLittleContentEngine.UI/scripts.js\u0022)\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E \u003C/span\u003E\u003Cspan class=\u0022hljs-attr\u0022\u003Edefer\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E\u0026gt;\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E\u0026lt;\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E/\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003Escript\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E\u0026gt;\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E    \u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E\u0026lt;\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003Escript\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E\u0026gt;\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E        \u003C/span\u003E\u003Cspan class=\u0022hljs-comment\u0022\u003E//\u003C/span\u003E\u003Cspan class=\u0022hljs-comment\u0022\u003E Set global base URL for scripts to use (required for subdirectory deployments)\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        \u003Cspan class=\u0022hljs-variable\u0022\u003Ewindow\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-variable\u0022\u003EMyLittleContentEngineBaseUrl\u003C/span\u003E \u003Cspan class=\u0022hljs-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0027\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E@LinkService.GetLink(\u0022/\u0022)\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0027\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E;\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-tag\u0022\u003E\u0026lt;\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E/\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003Escript\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E\u0026gt;\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E\u0026lt;/\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003Ehead\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E\u0026gt;\u003C/span\u003E\u003C/span\u003E\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\n\u003Cp\u003EDon\u0027t forget to inject the LinkService:\u003C/p\u003E\n\u003Cdiv class=\u0022code-highlight-wrapper not-prose\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-container\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-highlight\u0022\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003E@inject\u003C/span\u003E \u003Cspan class=\u0022hljs-variable roslyn-local-name\u0022\u003ELinkService\u003C/span\u003E \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003ELinkService\u003C/span\u003E\u003C/span\u003E\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/li\u003E\u003Cli class=\u0022mb-10 \u0022\u003E\u003Cspan class=\u0022not-prose -start-3 lg:-start-4 absolute flex items-center font-display text-xs lg:text-base font-bold justify-center mt-0.5 lg:mt-0 w-6 h-6 lg:w-8 lg:h-8 bg-base-100 rounded-full ring-2 ring-base-300 dark:ring-base-800 dark:bg-base-900\u0022\u003E4\u003C/span\u003E\n    \n    \u003Ch2 id=\u0022configure-content-service-priorities-optional\u0022\u003EConfigure Content Service Priorities (Optional)\u003C/h2\u003E\n\u003Cp\u003EContent services have configurable search priorities that affect result ranking:\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Cstrong\u003EMarkdownContentService\u003C/strong\u003E: Priority 10 (high) - documentation and guides appear first\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EApiReferenceContentService\u003C/strong\u003E: Priority 5 (medium) - API docs appear after main content\u003C/li\u003E\n\u003C/ul\u003E\n\u003Cp\u003ETo customize priorities for custom content services, implement the \u003Ccode\u003ESearchPriority\u003C/code\u003E property:\u003C/p\u003E\n\u003Cdiv class=\u0022code-highlight-wrapper not-prose\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-container\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-highlight\u0022\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Epublic\u003C/span\u003E \u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Eclass\u003C/span\u003E \u003Cspan class=\u0022hljs-type roslyn-class-name\u0022\u003EMyCustomContentService\u003C/span\u003E \u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EIContentService\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E{\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Epublic\u003C/span\u003E \u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Eint\u003C/span\u003E \u003Cspan class=\u0022hljs-attr roslyn-property-name\u0022\u003ESearchPriority\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u0026gt;\u003C/span\u003E \u003Cspan class=\u0022hljs-number roslyn-number\u0022\u003E8\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E;\u003C/span\u003E \u003Cspan class=\u0022hljs-comment roslyn-comment\u0022\u003E// Custom priority (1-10 range recommended)\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-comment roslyn-comment\u0022\u003E// Other implementation...\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E}\u003C/span\u003E\u003C/span\u003E\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/li\u003E\u003C/ol\u003E\u003C/div\u003E\u003Ch2 id=\u0022search-features\u0022\u003ESearch Features\u003C/h2\u003E\n\u003Ch3 id=\u0022intelligent-content-ranking\u0022\u003EIntelligent Content Ranking\u003C/h3\u003E\n\u003Cp\u003EThe search system uses multiple factors to rank results:\u003C/p\u003E\n\u003Col\u003E\n\u003Cli\u003E\u003Cstrong\u003EField Weights\u003C/strong\u003E: Title (3x) \u0026gt; Description (2x) \u0026gt; Headings (1.5x) \u0026gt; Content (1x)\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EHeading Priority\u003C/strong\u003E: H1 headings weighted higher than H2, H3, etc.\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EContent Service Priority\u003C/strong\u003E: Markdown content ranked higher than API reference\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EPosition in Results\u003C/strong\u003E: Earlier matches in FlexSearch results get higher scores\u003C/li\u003E\n\u003C/ol\u003E\n\u003Ch3 id=\u0022smart-content-processing\u0022\u003ESmart Content Processing\u003C/h3\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Cstrong\u003ECode Block Removal\u003C/strong\u003E: Code samples are excluded from search content for cleaner results\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EHeading Extraction\u003C/strong\u003E: Headings are extracted with level-based priority weighting\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EHTML Cleaning\u003C/strong\u003E: Scripts, styles, and markup are removed, leaving clean searchable text\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EOptimized Index\u003C/strong\u003E: Headings stored as \u003Ccode\u003E\u0022level:text\u0022\u003C/code\u003E format for efficient client-side processing\u003C/li\u003E\n\u003C/ul\u003E\n\u003Ch3 id=\u0022search-ui-features\u0022\u003ESearch UI Features\u003C/h3\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Cstrong\u003EModal Interface\u003C/strong\u003E: Clean, focused search experience\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EKeyboard Shortcuts\u003C/strong\u003E: \u003Ccode\u003ECtrl\u002BK\u003C/code\u003E (Windows/Linux) or \u003Ccode\u003ECmd\u002BK\u003C/code\u003E (Mac) to open search\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003ELive Search\u003C/strong\u003E: Results appear as you type with 300ms debounce\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EResult Highlighting\u003C/strong\u003E: Search terms highlighted in titles, descriptions, and content snippets\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EFailure Handling\u003C/strong\u003E: Graceful degradation with clear error messages, no retry storms\u003C/li\u003E\n\u003C/ul\u003E\n\u003Ch2 id=\u0022customization\u0022\u003ECustomization\u003C/h2\u003E\n\u003Ch3 id=\u0022styling\u0022\u003EStyling\u003C/h3\u003E\n\u003Cp\u003EThe search interface uses semantic CSS classes that are automatically styled by MonorailCSS:\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Ccode\u003E.search-modal-backdrop\u003C/code\u003E - Modal overlay\u003C/li\u003E\n\u003Cli\u003E\u003Ccode\u003E.search-modal-content\u003C/code\u003E - Modal container\u003C/li\u003E\n\u003Cli\u003E\u003Ccode\u003E.search-result-item\u003C/code\u003E - Individual search results\u003C/li\u003E\n\u003Cli\u003E\u003Ccode\u003E.search-highlight\u003C/code\u003E - Highlighted search terms\u003C/li\u003E\n\u003C/ul\u003E\n\u003Cp\u003ECustomize the appearance by adding CSS rules in your stylesheets or via MonorailCSS configuration.\u003C/p\u003E\n\u003Ch3 id=\u0022search-index-endpoint\u0022\u003ESearch Index Endpoint\u003C/h3\u003E\n\u003Cp\u003EThe search index is automatically available at \u003Ccode\u003E/search-index.json\u003C/code\u003E and includes:\u003C/p\u003E\n\u003Cdiv class=\u0022code-highlight-wrapper not-prose\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-container\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-highlight\u0022\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E{\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003Cspan class=\u0022hljs-punctuation\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-keyword\u0022\u003Edocuments\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-punctuation\u0022\u003E[\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-punctuation\u0022\u003E{\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E      \u003Cspan class=\u0022hljs-punctuation\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-keyword\u0022\u003Eurl\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E/page-url\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E      \u003Cspan class=\u0022hljs-punctuation\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-keyword\u0022\u003Etitle\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003EPage Title\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E,\u003C/span\u003E \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E      \u003Cspan class=\u0022hljs-punctuation\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-keyword\u0022\u003Edescription\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003EPage description\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E      \u003Cspan class=\u0022hljs-punctuation\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-keyword\u0022\u003Econtent\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003EClean page content without code blocks\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E      \u003Cspan class=\u0022hljs-punctuation\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-keyword\u0022\u003Eheadings\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-punctuation\u0022\u003E[\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E1:Main Heading\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E,\u003C/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E2:Sub Heading\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E]\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E      \u003Cspan class=\u0022hljs-punctuation\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-keyword\u0022\u003EsearchPriority\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-number\u0022\u003E10\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-punctuation\u0022\u003E}\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003Cspan class=\u0022hljs-punctuation\u0022\u003E]\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003Cspan class=\u0022hljs-punctuation\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-keyword\u0022\u003EgeneratedAt\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E2024-01-01T00:00:00.000Z\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E}\u003C/span\u003E\u003C/span\u003E\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003Ch2 id=\u0022troubleshooting\u0022\u003ETroubleshooting\u003C/h2\u003E\n\u003Cp\u003E\u003Cstrong\u003ESearch modal not appearing:\u003C/strong\u003E\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003EVerify \u003Ccode\u003Eid=\u0022search-input\u0022\u003C/code\u003E is present on your search element\u003C/li\u003E\n\u003Cli\u003ECheck browser console for JavaScript errors\u003C/li\u003E\n\u003Cli\u003EEnsure \u003Ccode\u003Escripts.js\u003C/code\u003E is loading correctly\u003C/li\u003E\n\u003C/ul\u003E\n\u003Cp\u003E\u003Cstrong\u003ESearch index not loading:\u003C/strong\u003E\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003EVerify the \u003Ccode\u003E/search-index.json\u003C/code\u003E endpoint is accessible\u003C/li\u003E\n\u003Cli\u003ECheck that \u003Ccode\u003EMyLittleContentEngineBaseUrl\u003C/code\u003E is set correctly in subdirectory deployments\u003C/li\u003E\n\u003Cli\u003ELook for network errors in browser developer tools\u003C/li\u003E\n\u003C/ul\u003E\n\u003Cp\u003E\u003Cstrong\u003ENo search results:\u003C/strong\u003E\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003EVerify your content services are implementing \u003Ccode\u003EGetPagesToGenerateAsync()\u003C/code\u003E correctly\u003C/li\u003E\n\u003Cli\u003ECheck that pages are publicly accessible (search index generation fetches actual HTML)\u003C/li\u003E\n\u003Cli\u003EEnsure content contains searchable text (not just images or code)\u003C/li\u003E\n\u003C/ul\u003E\n\u003Cp\u003E\u003Cstrong\u003ESubdirectory deployment issues:\u003C/strong\u003E\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003EEnsure \u003Ccode\u003ELinkService\u003C/code\u003E is injected in \u003Ccode\u003EApp.razor\u003C/code\u003E\u003C/li\u003E\n\u003Cli\u003EVerify \u003Ccode\u003Ewindow.MyLittleContentEngineBaseUrl\u003C/code\u003E is set correctly\u003C/li\u003E\n\u003Cli\u003ECheck that the search index URL resolves to the correct subdirectory\u003C/li\u003E\n\u003C/ul\u003E\n\u003Cp\u003EYour search functionality will now provide fast, intelligent search across all your content with automatic indexing and a polished user interface!\u003C/p\u003E\n\u003C/main\u003E\u003Cdiv class=\u0022flex my-12 border-t border-base-200 dark:border-base-700 pt-4 lg:pt-8\u0022\u003E\u003Cdiv class=\u0022flex flex-col items-start  gap-3\u0022\u003E\u003Ca class=\u0022inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium font-display transition rounded-xl bg-base-200 pt-1.5 pb-1 px-3 lg:pt-2 lg:pb.15 lg:px-4 hover:bg-base-300/75 dark:bg-base-800/40 text-base-800 dark:text-base-400 ring-1 dark:ring-inset ring-base-300/75 dark:ring-base-800 dark:hover:bg-base-800 dark:hover:text-base-300\u0022 aria-label=\u0022Previous: Configure Custom Styling\u0022 href=\u0022/MyLittleContentEngine/guides/configure-custom-styling/\u0022\u003E\u003Cspan class=\u0022-ml-1 rotate-180\u0022\u003E\u003Csvg viewBox=\u00220 0 20 20\u0022 fill=\u0022none\u0022 aria-hidden=\u0022true\u0022 class=\u0022mt-0.5 h-5 w-5\u0022\u003E\u003Cpath stroke=\u0022currentColor\u0022 stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 d=\u0022m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9\u0022\u003E\u003C/path\u003E\u003C/svg\u003E\u003C/span\u003E Previous\u003C/a\u003E\n            \u003Ca tabindex=\u0022-1\u0022 aria-hidden=\u0022true\u0022 class=\u0022text-sm lg:text-base font-semibold text-base-700 transition hover:text-base-600 dark:text-base-400 dark:hover:text-base-300\u0022 href=\u0022/MyLittleContentEngine/guides/configure-custom-styling/\u0022\u003EConfigure Custom Styling\u003C/a\u003E\u003C/div\u003E\u003Cdiv class=\u0022flex flex-col items-end ml-auto gap-3\u0022\u003E\u003Ca class=\u0022inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium font-display transition rounded-xl bg-base-200 pt-1.5 pb-1 px-3 lg:pt-2 lg:pb.15 lg:px-4 hover:bg-base-300/75 dark:bg-base-800/40 text-base-800 dark:text-base-400 ring-1 dark:ring-inset ring-base-300/75 dark:ring-base-800 dark:hover:bg-base-800 dark:hover:text-base-300\u0022 aria-label=\u0022Next: Create Custom Content Service\u0022 href=\u0022/MyLittleContentEngine/guides/custom-content-service/\u0022\u003ENext \u003Cspan class=\u0022-mr-1\u0022\u003E\u003Csvg viewBox=\u00220 0 20 20\u0022 fill=\u0022none\u0022 aria-hidden=\u0022true\u0022 class=\u0022mt-0.5 h-5 w-5\u0022\u003E\u003Cpath stroke=\u0022currentColor\u0022 stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 d=\u0022m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9\u0022\u003E\u003C/path\u003E\u003C/svg\u003E\u003C/span\u003E\u003C/a\u003E\n            \u003Ca tabindex=\u0022-1\u0022 aria-hidden=\u0022true\u0022 class=\u0022text-sm lg:text-base font-semibold text-base-700 transition hover:text-base-600 dark:text-base-400 dark:hover:text-base-300\u0022 href=\u0022/MyLittleContentEngine/guides/custom-content-service/\u0022\u003ECreate Custom Content Service\u003C/a\u003E\u003C/div\u003E\u003C/div\u003E"}}