Search typeahead

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

---

Logic

	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.

Modifiers

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

1. Carbon search

required component

Logic

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

Events

	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

1.1 Search submit button

optional

Modifiers

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

Events

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

2. Typeahead

required

Events

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

See Search typeahead service

2.1 Typeahead item

States

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

Events

	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.

2.2 Keyboard navigation

Copy Carbon dropdown behavior and accessibility.

3. Scoped filter

optional

See Carbon dropdown

Logic

	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.

Events

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

3.1 Menu item

Events

	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?