Internationalization (i18n) - Vanilla Smart Select

Complete internationalization system with automatic language detection, multi-language support and ability to switch languages dynamically without recreating the component.

Automatic Language Detection

VanillaSmartSelect automatically detects the browser language and applies the corresponding translations.

Select fruits (multiple selection, maximum 3):

✓ Language detected:
Test: Type in the field to see "Searching...", search for something non-existent to see "No results"

View code

HTML

<select id="auto" multiple>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
  <option value="grape">Grape</option>
  <option value="strawberry">Strawberry</option>
</select>

JavaScript

// Automatic browser language detection
new VanillaSmartSelect('#auto', {
  searchable: true,
  maximumSelectionLength: 3
});

// Language is automatically detected based on navigator.language

Switch Language Dynamically

Change the language at runtime without recreating the select.

Programming Languages:

Instructions:
1. Click the buttons to switch language
2. Type in the field to see "Searching..." message in selected language
3. Search for something non-existent to see "No results" message

View code

HTML

<button onclick="changeLanguage('en')">🇺🇸 English</button>
<button onclick="changeLanguage('pt-BR')">🇧🇷 Português</button>
<button onclick="changeLanguage('es')">🇪🇸 Español</button>

<select id="dynamic" multiple>
  <option value="js">JavaScript</option>
  <option value="py">Python</option>
  <option value="java">Java</option>
  <option value="cpp">C++</option>
  <option value="rust">Rust</option>
  <option value="go">Go</option>
</select>

JavaScript

import { getLanguage } from './vanilla-smart-select.js';

const dynamicSelect = new VanillaSmartSelect('#dynamic', {
  searchable: true,
  language: getLanguage('pt-BR') // Initial language
});

function changeLanguage(lang) {
  // Switch language dynamically
  dynamicSelect.updateLanguage(getLanguage(lang));
  
  console.log(`Language changed to: ${lang}`);
}

Customize Specific Messages

Override specific messages while keeping the other default translations.

Select up to 2 colors:

Custom message: The maximum limit message has been customized with emoji.
Test: Try selecting more than 2 items to see the custom message.

View code

HTML

<select id="custom" multiple>
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
  <option value="yellow">Yellow</option>
  <option value="purple">Purple</option>
</select>

JavaScript

import { getLanguage } from './vanilla-smart-select.js';

new VanillaSmartSelect('#custom', {
  searchable: true,
  maximumSelectionLength: 2,
  language: {
    ...getLanguage('pt-BR'), // Keep default translations
    // Override only the maximum limit message
    maximumSelected: (args) => 
      `🚫 Oops! Limit of ${args.maximum} ${args.maximum === 1 ? 'item' : 'items'} reached!`
  }
});

💡 Tip: You can use functions for dynamic messages that receive parameters like maximum, minimum, over, etc.

Available Languages

Language	Code	Status
🇺🇸 English	`en`	✓ Available
🇧🇷 Português (Brasil)	`pt-BR`	✓ Available
🇪🇸 Español	`es`	✓ Available

Translation API

📋 Available Messages:

noResults: Displayed when no results are found in the search
searching: Displayed while searching for results
loadingMore: Displayed when loading more results (pagination)
errorLoading: Displayed when an error occurs loading data
maximumSelected: Displayed when selection limit is reached
inputTooShort: Displayed when search has fewer characters than minimum
inputTooLong: Displayed when search exceeds maximum characters

Complete Configuration Example

// Define all custom messages
new VanillaSmartSelect('#mySelect', {
  language: {
    noResults: 'No results found',
    searching: 'Searching...',
    loadingMore: 'Loading more results...',
    errorLoading: 'Error loading results',
    maximumSelected: (args) => `You can only select ${args.maximum} items`,
    inputTooShort: (args) => `Type ${args.minimum} or more characters`,
    inputTooLong: (args) => `Remove ${args.over} character(s)`
  }
});

Use Pre-defined Language

import { getLanguage } from './vanilla-smart-select.js';

// Use English
new VanillaSmartSelect('#mySelect', {
  language: getLanguage('en')
});

// Use Spanish
new VanillaSmartSelect('#mySelect', {
  language: getLanguage('es')
});

Best Practices

✅ Recommendations:

Auto-detection: Use automatic detection for better user experience
Persistence: Save language preference in localStorage
Fallback: Always have English as fallback language
Context: Adapt messages to application context
Plural: Use functions to correctly handle singular/plural
Performance: Use updateLanguage() instead of recreating the component

← Templates Home →