searchcraft-search-results

This web component is responsible for displaying the results of a search query. Once a query is submitted, the component formats and presents an ordered list of the results.

Import

React

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

Vue

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

Usage

JS

index.html

<searchcraft-search-results
  ad-interval="4"
  place-ad-at-start="true"
/>

index.js

const searchResults = document.querySelector('searchcraft-search-results');

searchResults.template = (item, index, { html }) => html`
 <h2>${item.title}</h2>
`;

React

<SearchcraftSearchResults
  adInterval={4}
  placeAdAtState={true}
  template={(item, index, { html }) => html`
    <h2>${item.title}</h2>
  `}
/>

Vue

<SearchcraftSearchResults
  adInterval={4}
  placeAdAtState={true}
  :template={(item, index, { html }) => html`
    <h2>${item.title}</h2>
  `}
/>

Properties

Property	Attribute	Description	Type	Default
initialQuery	initial-query	A query that will appears when the component initializes or the search term is ”..	string | undefined	undefined
searchcraftId	searchcraft-id	The id of the Searchcraft instance that this component should use.	string | undefined	undefined
template	—	A callback function responsible for rendering a result. Passed to searchcraft-search-result.	((data: any, index: number, utils: { html: TemplateHtml; source_index?: string | undefined; }) => string) | undefined	undefined