# Search & Discovery / Search Autocomplete Smart search with autocomplete suggestions, popular searches, and curated categories. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-search-autocomplete--full-screen ## Pattern variants - Full Screen: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-search-autocomplete--full-screen - Column: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-search-autocomplete--column - Desktop Workspace: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-search-autocomplete--desktop-workspace ## When to use this pattern Use Search & Discovery / Search Autocomplete when building citizen-facing flows that match the described government journey. Combine components such as cards, forms, tables, buttons, and status indicators as shown in Storybook. ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Search & Discovery / Search Autocomplete. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Column — Search Autocomplete - Full Page HTML: ```html

Find any government service

Search 3,000+ services & schemes

search
  • Searching for ' income '
  • manage_search Income Certificate Revenue Dept
  • manage_search Income Tax Return... Income Tax Dept
  • manage_search Low Income Group... Social Welfare
  • manage_search Income & Asset Cer... Revenue Dept

Browse by category

local_hospital

Health

24 services

agriculture

Agriculture

18 services

school

Education

31 services

terrain

Land Records

12 services

directions_bus

Transport

15 services

volunteer_activism

Social Welfare

27 services

bolt

Utilities

9 services

account_balance

Finance

21 services

Popular services

Income Certificate

Revenue Department

Free · 20 mins

Caste Certificate

Social Welfare Dept

Free · 15 mins

Driving Licence

Transport Department

₹200 · 30 days

PAN Card

Income Tax Dept

₹107 · 15 days
``` React: ```jsx import React from 'react'; const SearchDiscoverySearchAutocompleteExample1Demo = () => ( <>
{/* Top Search Section with Lavender/Primary background on mobile, styled responsively */}
{/* Title and Subtitle */}

Find any government service

Search 3,000+ services & schemes

{/* Search Input Bar */}
search
  • Searching for ' income '
  • manage_search Income Certificate Revenue Dept
  • manage_search Income Tax Return... Income Tax Dept
  • manage_search Low Income Group... Social Welfare
  • manage_search Income & Asset Cer... Revenue Dept
{/* Main Content Area */}
{/* Category Browse Section */}

Browse by category

{/* Card 1: Health */}
local_hospital

Health

24 services

{/* Card 2: Agriculture */}
agriculture

Agriculture

18 services

{/* Card 3: Education */}
school

Education

31 services

{/* Card 4: Land Records */}
terrain

Land Records

12 services

{/* Card 5: Transport */}
directions_bus

Transport

15 services

{/* Card 6: Social Welfare */}
volunteer_activism

Social Welfare

27 services

{/* Card 7: Utilities */}
bolt

Utilities

9 services

{/* Card 8: Finance */}
account_balance

Finance

21 services

{/* Popular Services Section */}

Popular services

{/* Card 1: Income Certificate */}

Income Certificate

Revenue Department

Free · 20 mins
{/* Card 2: Caste Certificate */}

Caste Certificate

Social Welfare Dept

Free · 15 mins
{/* Card 3: Driving Licence */}

Driving Licence

Transport Department

₹200 · 30 days
{/* Card 4: PAN Card */}

PAN Card

Income Tax Dept

₹107 · 15 days
); export default SearchDiscoverySearchAutocompleteExample1Demo; ``` Angular: ```html

Find any government service

Search 3,000+ services & schemes

search
  • Searching for ' income '
  • manage_search Income Certificate Revenue Dept
  • manage_search Income Tax Return... Income Tax Dept
  • manage_search Low Income Group... Social Welfare
  • manage_search Income & Asset Cer... Revenue Dept

Browse by category

local_hospital

Health

24 services

agriculture

Agriculture

18 services

school

Education

31 services

terrain

Land Records

12 services

directions_bus

Transport

15 services

volunteer_activism

Social Welfare

27 services

bolt

Utilities

9 services

account_balance

Finance

21 services

Popular services

Income Certificate

Revenue Department

Free · 20 mins

Caste Certificate

Social Welfare Dept

Free · 15 mins

Driving Licence

Transport Department

₹200 · 30 days

PAN Card

Income Tax Dept

₹107 · 15 days
``` ### 2. Desktop Workspace — Search Autocomplete - Full Page HTML: ```html

Find any government service

Search 3,000+ services & schemes

search
  • Searching for ' income '
  • manage_search Income Certificate Revenue Dept
  • manage_search Income Tax Return... Income Tax Dept
  • manage_search Low Income Group... Social Welfare
  • manage_search Income & Asset Cer... Revenue Dept

Browse by category

local_hospital

Health

24 services

agriculture

Agriculture

18 services

school

Education

31 services

terrain

Land Records

12 services

directions_bus

Transport

15 services

volunteer_activism

Social Welfare

27 services

bolt

Utilities

9 services

account_balance

Finance

21 services

Popular services

Income Certificate

Revenue Department

Free · 20 mins

Caste Certificate

Social Welfare Dept

Free · 15 mins

Driving Licence

Transport Department

₹200 · 30 days

PAN Card

Income Tax Dept

₹107 · 15 days
``` React: ```jsx import React from 'react'; const SearchDiscoverySearchAutocompleteExample2Demo = () => ( <>
{/* Top Search Section with Lavender/Primary background on mobile, styled responsively */}
{/* Title and Subtitle */}

Find any government service

Search 3,000+ services & schemes

{/* Search Input Bar */}
search
  • Searching for ' income '
  • manage_search Income Certificate Revenue Dept
  • manage_search Income Tax Return... Income Tax Dept
  • manage_search Low Income Group... Social Welfare
  • manage_search Income & Asset Cer... Revenue Dept
{/* Main Content Area */}
{/* Category Browse Section */}

Browse by category

{/* Card 1: Health */}
local_hospital

Health

24 services

{/* Card 2: Agriculture */}
agriculture

Agriculture

18 services

{/* Card 3: Education */}
school

Education

31 services

{/* Card 4: Land Records */}
terrain

Land Records

12 services

{/* Card 5: Transport */}
directions_bus

Transport

15 services

{/* Card 6: Social Welfare */}
volunteer_activism

Social Welfare

27 services

{/* Card 7: Utilities */}
bolt

Utilities

9 services

{/* Card 8: Finance */}
account_balance

Finance

21 services

{/* Popular Services Section */}

Popular services

{/* Card 1: Income Certificate */}

Income Certificate

Revenue Department

Free · 20 mins
{/* Card 2: Caste Certificate */}

Caste Certificate

Social Welfare Dept

Free · 15 mins
{/* Card 3: Driving Licence */}

Driving Licence

Transport Department

₹200 · 30 days
{/* Card 4: PAN Card */}

PAN Card

Income Tax Dept

₹107 · 15 days
); export default SearchDiscoverySearchAutocompleteExample2Demo; ``` Angular: ```html

Find any government service

Search 3,000+ services & schemes

search
  • Searching for ' income '
  • manage_search Income Certificate Revenue Dept
  • manage_search Income Tax Return... Income Tax Dept
  • manage_search Low Income Group... Social Welfare
  • manage_search Income & Asset Cer... Revenue Dept

Browse by category

local_hospital

Health

24 services

agriculture

Agriculture

18 services

school

Education

31 services

terrain

Land Records

12 services

directions_bus

Transport

15 services

volunteer_activism

Social Welfare

27 services

bolt

Utilities

9 services

account_balance

Finance

21 services

Popular services

Income Certificate

Revenue Department

Free · 20 mins

Caste Certificate

Social Welfare Dept

Free · 15 mins

Driving Licence

Transport Department

₹200 · 30 days

PAN Card

Income Tax Dept

₹107 · 15 days
``` ### 3. Full Screen — Search Autocomplete - Full Page HTML: ```html

Find any government service

Search 3,000+ services & schemes

search
  • Searching for ' income '
  • manage_search Income Certificate Revenue Dept
  • manage_search Income Tax Return... Income Tax Dept
  • manage_search Low Income Group... Social Welfare
  • manage_search Income & Asset Cer... Revenue Dept

Browse by category

local_hospital

Health

24 services

agriculture

Agriculture

18 services

school

Education

31 services

terrain

Land Records

12 services

directions_bus

Transport

15 services

volunteer_activism

Social Welfare

27 services

bolt

Utilities

9 services

account_balance

Finance

21 services

Popular services

Income Certificate

Revenue Department

Free · 20 mins

Caste Certificate

Social Welfare Dept

Free · 15 mins

Driving Licence

Transport Department

₹200 · 30 days

PAN Card

Income Tax Dept

₹107 · 15 days
``` React: ```jsx import React from 'react'; const SearchDiscoverySearchAutocompleteExample3Demo = () => ( <>
{/* Top Search Section with Lavender/Primary background on mobile, styled responsively */}
{/* Title and Subtitle */}

Find any government service

Search 3,000+ services & schemes

{/* Search Input Bar */}
search
  • Searching for ' income '
  • manage_search Income Certificate Revenue Dept
  • manage_search Income Tax Return... Income Tax Dept
  • manage_search Low Income Group... Social Welfare
  • manage_search Income & Asset Cer... Revenue Dept
{/* Main Content Area */}
{/* Category Browse Section */}

Browse by category

{/* Card 1: Health */}
local_hospital

Health

24 services

{/* Card 2: Agriculture */}
agriculture

Agriculture

18 services

{/* Card 3: Education */}
school

Education

31 services

{/* Card 4: Land Records */}
terrain

Land Records

12 services

{/* Card 5: Transport */}
directions_bus

Transport

15 services

{/* Card 6: Social Welfare */}
volunteer_activism

Social Welfare

27 services

{/* Card 7: Utilities */}
bolt

Utilities

9 services

{/* Card 8: Finance */}
account_balance

Finance

21 services

{/* Popular Services Section */}

Popular services

{/* Card 1: Income Certificate */}

Income Certificate

Revenue Department

Free · 20 mins
{/* Card 2: Caste Certificate */}

Caste Certificate

Social Welfare Dept

Free · 15 mins
{/* Card 3: Driving Licence */}

Driving Licence

Transport Department

₹200 · 30 days
{/* Card 4: PAN Card */}

PAN Card

Income Tax Dept

₹107 · 15 days
); export default SearchDiscoverySearchAutocompleteExample3Demo; ``` Angular: ```html

Find any government service

Search 3,000+ services & schemes

search
  • Searching for ' income '
  • manage_search Income Certificate Revenue Dept
  • manage_search Income Tax Return... Income Tax Dept
  • manage_search Low Income Group... Social Welfare
  • manage_search Income & Asset Cer... Revenue Dept

Browse by category

local_hospital

Health

24 services

agriculture

Agriculture

18 services

school

Education

31 services

terrain

Land Records

12 services

directions_bus

Transport

15 services

volunteer_activism

Social Welfare

27 services

bolt

Utilities

9 services

account_balance

Finance

21 services

Popular services

Income Certificate

Revenue Department

Free · 20 mins

Caste Certificate

Social Welfare Dept

Free · 15 mins

Driving Licence

Transport Department

₹200 · 30 days

PAN Card

Income Tax Dept

₹107 · 15 days
```