searchcraft-popover-form

This web component is designed to display search results in a popover container that dynamically appears when the user interacts with a search input field, or when a popover-button is pressed.

Import

React

import { SearchcraftPopoverForm } from "@searchcraft/react-sdk";

Vue

import { SearchcraftPopoverForm } from "@searchcraft/vue-sdk";

Usage

JS

index.html

<searchcraft-popover-form type="inline" />

index.js

const popoverForm = document.querySelector('searchcraft-popover-form');

popoverForm.popoverResultMappings = {};

React

<SearchcraftPopoverForm type="inline" popoverResultMappings={[]} />

Vue

<SearchcraftPopoverForm type="inline" :popoverResultMappings="[]"" />

Properties

Property	Attribute	Description	Type	Default
hotkey	hotkey	The hotkey that activates the popover.	string | undefined	'k'
hotkeyModifier	hotkey-modifier	The hotkey modifier that activates the popover. Used together with the hotkey prop.	"alt" | "ctrl" | "meta" | "option" | undefined	'meta'
placeholderBehavior	placeholder-behavior	The placeholder’s render behavior. ‘hide-on-focus’ - Hide the placeholder text immediately when the input form gains focus. ‘hide-on-text-entered’ - Only hide the placeholder when the input form has text entered into it.	"hide-on-focus" | "hide-on-text-entered" | undefined	undefined
placeholderValue	placeholder-value	The input element’s placeholder value.	string | undefined	'Enter Search'
popoverResultMappings	—	Formats the content rendered for each result.	undefined | { title?: SearchResultMapping | undefined; subtitle?: SearchResultMapping | undefined; imageSource?: SearchResultMapping | undefined; imageAlt?: SearchResultMapping | undefined; href?: SearchResultMapping | undefined; }	undefined
searchcraftId	searchcraft-id	The id of the Searchcraft instance that this component should use.	string | undefined	undefined
type	type	The type of popover form to render. - inline - Renders inline with the rest of the content on the page. The search results pop over the page content. - fullscreen - Renders in fullscreen view. Used together with the searchcraft-popover-button component. - modal - Renders in a modal view. Used together with the searchcraft-popover-button component.	"fullscreen" | "inline" | "modal" | undefined	'inline'