Link input

const getSearchSuggestions = async (search) => {
	// Do your thing, and return an array of suggestions.
	// Each item should have a `label` and a `value`.
	// Optionally, you can include a `subtype` within
	// `metadata` to show a different icon in the suggestions.
};

<LinkInput
	label='URL'
	url={data}
	onChange={({ url }) => setAttributes({ myUrl: url })}
	fetchSuggestions={getSearchSuggestions}
/>;

Frontend libs integration

If using Frontend libs (v13+) or Frontend libs Tailwind, for the fetchSuggestions callback you can import the included wpSearchRoute function.

import { wpSearchRoute } from '@eightshift/frontend-libs-tailwind/scripts';

...

<LinkInput
	label='URL'
	url={data}
	onChange={({ url }) => setAttributes({ myUrl: url })}
	fetchSuggestions={getSearchSuggestions}
/>

Providing custom metadata icons

If you want to provide custom icons for the search suggestions, you can provide a mapping list with the suggestionTypeIconOverride prop to map the subtype to the icon.

const overrides = {
	post: icons.newspaper,
	page: icons.magicAltFillTransparent,
	'help-article': icons.troubleshootAlt,
};

<LinkInput
	label='URL'
	url={data}
	onChange={({ url }) => setAttributes({ myUrl: url })}
	fetchSuggestions={getSearchSuggestions}
	suggestionTypeIconOverride={(type) => overrides[type]}
/>;