Search typeahead - carbon-design-system/carbon-for-ibm-dotcom-website GitHub Wiki

Decorator UI component

Search typeahead brings together Carbon search and the Search typeahead service to provide this reusable search component with typeahead functionality.

---

Table of contents

• 1. Carbon search
  • 1.1 Search submit button
• 2. Typeahead
  • 2.1 Typeahead item
  • 2.2 Keyboard navigation
• 3. Scoped filter
  • 3.1 Menu item

Dependencies (4)

• Carbon search
• Search typeahead service
• Carbon dropdown
• Carbon icons

Used by (2)

• Lead space search
• Masthead L0

Back links (1)

Masthead L0 (1)

• See Search typeahead for more

Resources

• r1: Box folder

---

	condition	description
0.1.0	scope variable found	Variables from page sets scope initially.
0.1.1	scope variable not found	Defaults scope to all of IBM if not found.

	value	type	description
0.1.2	cta	boolean	Hide default or shows optional CTA button.

required component

	condition	description
1.0.0	scope selected	Placeholder value changes to reflect selected scope state.

	name	description
1.0.1	onRender	Input gets focus
1.0.2	onEnter	Navigates to search results page.
1.0.3	onKeyDown with value	Typeahead 2 initialized with value and scope
1.0.4	onKeyDown without value	Typeahead 2 closed
1.0.5	onClear	Typeahead 2 closed
1.0.5	onBlur	Typeahead 2 closed

See Carbon search

optional

	value	type	description
1.1.0	false	Boolean	hides submit button	default
1.1.1	true	Boolean	shows submit button

	name	description
1.1.2	onClick	Navigates to search results page.
1.1.3	onEnter	Navigates to search results page.

required

	name	description
2.0.0	onRender	List out typeahead suggestions returned from the Search typeahead service.

See Search typeahead service

	name	description
2.1.0	Search value	Highlight search value passed into typeahead 2.

	name	description
2.1.1	onClick	Navigates user to search results page based on search value.
2.1.2	onEnter	Navigates user to search results page based on search value.

Copy Carbon dropdown behavior and accessibility.

optional

See Carbon dropdown

	condition	description
3.0.0	@lg @xlg @max	Uses Carbon dropdown
3.0.1	@sm @md	Filter icon only instead of default text and Chevron down icon.

See Carbon icons for Filter icon.

	name	description
3.0.2	onClick	Opens Carbon dropdown menu with list of available scope options.

	name	description
3.1.0	onClick	New scope set, and Carbon search 1 gets focus.

Where does the filtered options come from? API, adopter, or both?