ontario-ca-search-autosuggest v0.1.28

Ontario Autosuggest Web Components

NOTE: This document is out of date and will need to be updated to reflect the current state of this project

This package is used to build an autosuggest search input and related results. It is designed to be dynamic so that any Elastic data can be connected, but still generate the same functioanlity, look and feel.

• This package is built in React and leverages packages and features of the @elastic/search-ui project for various search functionalities.
• This package uses Styled Components and leverages styles from the Ontario Design System.
• Translations are handled through react-i18next.

Components

All components in this package are intended to be used together in order for all the search functionalities to work.

SearchLayout

The SearchLayout component is the main component of this package. It acts as the wrapper for the Elastic Search UI core.

Example:

import SearchLayout from '../components/search-layout'

import SVG from '../svg-file'


const iconCategories = [
	{
		key: 'world_heritage_site',
		value: 'true',
		icon: SVG,
	},
]

const resultView = (results) => {
	return (
		<div key={results.id.raw}>
			<h2>{results.title.raw}</h2>
			<p>{results.description.raw}</p>
		</div>
	)
}

const App = () => {
	return (
		<SearchLayout
			searchKey="search-1111"
			engineName="search-ui-examples"
			hostIdentifier="host-1111"
			resultTitleKey="title"
			resultLinkKey="url_link"
			resultDescriptionKey="description"
			iconCategories={iconCategories}
			isSearchResultsPage={true}
			header={
				<header>
					<SearchInputComponent
						...props
					/>
				</heaader>
			}
			generateResultView={resultView}
		/>
	)
}

export default App;

SearchInputComponent

The SearchInputComponent renders an input element which accepts search terms and triggers search queries through the Elastic Search UI functionality. It also displays a dropdown for autocomplete suggestions, categorization of result and results based on search suggestions.

Example:

import SearchInputComponent from '../components/search-bar/search-input'

import SVG from '../svg-file'

const iconCategories = [
	{
		key: 'world_heritage_site',
		value: 'true',
		icon: SVG,
	},
]

const SearchInput = () => {
	return (
		 <SearchInputComponent
			resultTitleKey="title"
			resultLinkKey="description"
			resultIdKey="id"
			iconCategories={iconCategories}
		/>
	)
}

export default SearchInput;

iconCategories

The iconCategories prop is used to create categorizations of results in the dropdown result of the SearchInputComponent. Each object takes a key, value and icon key. When the key that is passed matches the value that is passed, the icon specified will display before the autosuggest query results in the dropdown.

Translations

Translations for this project are handled through react-i18next.

The package has it's own internal set of translations used in common components (ex: search input toggles, result totals, back to top buttons, etc.) but can be set externally through either the language or languageLogic props in the SearchLayout component.