# NAICS industry codes autocomplete in JavaScript

A NAICS industry field in JavaScript that stores the code, finds an industry by code or title, and fills the sector and industry group from the chosen industry.

## How do I add a NAICS industry picker in JavaScript?
Point mountAutocomplete from the browser build at your NAICS list key and set selectionValue to value, so the field holds the code such as 541511 while rows show the title. The list is five levels deep, and each selection returns its ancestors, so the sector and industry group fill without another request.

## What is different about NAICS industry codes
- The code is the value: selectionValue: value writes the code (541511) into the field while the row still shows the title. The aliases include both the code and the title, so either finds the industry.
- Five levels: Sector, subsector, industry group, NAICS industry and national industry: 2,125 codes in all.
- Ancestors fill parent fields: A selection carries its ancestors, root first. fillAncestors maps level 1 to a sector field and level 3 to an industry group field, with no second request.
- Source and licence are on the dataset page: The list is the 2022 North American Industry Classification System, published by the U.S. Census Bureau. Its recorded provenance is on its dataset page.

## Steps
1. Publish or subscribe to the NAICS dataset and create a publishable key for the application.
2. Create the client once and call bootstrap() so the real minimum length and debounce are used.
3. Set selectionValue to value so the field holds the code, not the title.
4. Map ancestor levels to your own fields: level 1 is the sector and level 3 is the industry group.

## Code
```
<script src="YOUR_AUTOSUGGES_WEB_ORIGIN/sdk/v1/autosugges.js"></script>

<div id="industry-mount"></div>
<label>Sector <input name="naics_sector" readonly /></label>
<label>Industry group <input name="naics_industry_group" readonly /></label>

<script>
  const { createAutosuggesClient, mountAutocomplete } = window.AutoSuggesSDK;

  const source = createAutosuggesClient({
    baseUrl: 'YOUR_RUNTIME_BASE_URL',
    publishableKey: 'YOUR_PUBLISHABLE_KEY', // the key for your NAICS list
  });
  void source.bootstrap().catch(() => {});

  mountAutocomplete(document.getElementById('industry-mount'), {
    source,
    label: 'Industry (NAICS)',
    placeholder: 'Type a title, or a code like 541511',
    selectionValue: 'value', // the field holds 541511, not the title
    fillAncestors: { 1: 'naics_sector', 3: 'naics_industry_group' },
  });
</script>
```

## Check that it works
1. Type 541511. Custom Computer Programming Services appears.
2. Pick it. The field holds 541511 and the sector field fills with Professional, Scientific, and Technical Services.

## Security
A publishable key is public by design and belongs in client code exactly as written. Never place a secret key, a service-role credential or a database URL in this code or in generated code.

## Frequently asked questions

### Can people search NAICS by code as well as by title?

Yes. The code and the title are both aliases of each industry, so typing 541511 or custom computer programming finds it. Aliases are part of the list and add nothing extra at query time.

### How do I store only the six-digit code?

Set selectionValue to value. The input then holds the code, such as 541511, instead of the title. Rows in the list still show the title.

### How do I fill the sector from an industry?

Each selection carries its ancestors, root first. Map level 1 to your sector field with fillAncestors, or read the ancestors from the selection handler. No second request is made.

### Which NAICS edition is this?

The 2022 North American Industry Classification System, published by the U.S. Census Bureau. Its source, licence and authority class are recorded on the dataset page.

### What is the minimum number of characters before a query runs?

Two by default. A list owner can change the minimum, but it can never be 1. The client reads the real value from bootstrap and sends no request below it, so do not hardcode it.

---
Canonical page: https://docs.autosugges.com/integrations/vanilla-js/naics