Autosuggest
ready

The Autosuggest component enhances the search experience by dynamically presenting relevant suggestions in a flyout panel as the user types into the search input. This flyout appears directly beneath the search field and updates in real-time, offering predictive results based on user input, recent searches, popular queries, and contextual relevance.

icon-storybook-default Open in Storybook
Loading

Code

HTML 

import { NbhdAutosuggest } from '@fbin-web/neighborhood-core';
<nbhd-autosuggest> autosuggest </nbhd-autosuggest>

React 

import { NbhdAutosuggest } from '@fbin-web/neighborhood-react';

const App = () => (
  <>
    <NbhdAutosuggest>auto-suggestion</NbhdAutosuggest>
  </>
);

Properties

Property Attribute Type Default Description
prop prop string

Slots

Name Description
default Content area.

CSS Parts

Name Description
base The component's base wrapper.

CSS Properties

Property Default Value
--nbhd-element default

Dependencies

This component contains the following components as dependencies.