Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://coreui.io/bootstrap/docs/forms/autocomplete/ below:

Website Navigation

• Forms

Bootstrap Autocomplete - extended examples and tutorials

The Bootstrap Autocomplete Dropdown component is a powerful autocomplete dropdown plugin that enhances form control usability by suggesting completions as the user types. Whether you’re integrating with local JavaScript arrays or fetching live server responses via AJAX, this plugin enables rich, dynamic user interactions.

A straightforward demonstration of how to implement a basic Bootstrap Autocomplete input field, highlighting essential attributes and configurations.

<div
  data-coreui-toggle="autocomplete"
  data-coreui-cleaner="true"
  data-coreui-highlight-options-on-search="true"
  data-coreui-indicator="true"
  data-coreui-options="Angular, Bootstrap, React.js, Vue.js"
  data-coreui-placeholder="Search technologies..."
  data-coreui-search="global"
  data-coreui-search-no-results-label="No results found"
  data-coreui-show-hints="true"
  data-coreui-value="React.js"
></div>

Learn how to populate the autocomplete component with data from various sources, including arrays and objects, for dynamic content integration.

To dynamically populate an autocomplete input with suggestions from an array, use JavaScript to configure the component with predefined options.

<div id="myAutoComplete"></div>

We use the following JavaScript to set up our autocomplete:

const myAutoComplete = document.getElementById('myAutoComplete')

if (myAutoComplete) {
  new coreui.Autocomplete(myAutoComplete, {
    name: 'autocomplete',
    options: [
      'Angular',
      'Bootstrap',
      {
        label: 'React.js',
        disabled: true
      },
      'Vue.js',
      {
        label: 'backend',
        options: ['Django', 'Laravel', 'Node.js']
      }
    ],
    value: 'Laravel'
  })
}

You can organize suggestions into groups using optgroups for better categorization and user experience.

<div id="myAutoCompleteGrouped"></div>

const myAutoCompleteGrouped = document.getElementById('myAutoCompleteGrouped')

if (myAutoCompleteGrouped) {
  new coreui.Autocomplete(myAutoCompleteGrouped, {
    name: 'autocomplete-grouped',
    options: [
      'Angular',
      {
        label: 'Bootstrap',
        selected: true
      },
      {
        label: 'React.js',
        disabled: true
      },
      'Vue.js',
      {
        label: 'backend',
        options: ['Django', 'Laravel', 'Node.js']
      }
    ]
  })
}

You can use values in your options array. This is particularly useful when working with database IDs, product codes, or any numeric identifiers. Note that the component internally converts number values to strings for consistency and DOM compatibility.

<div id="myAutoCompleteValues"></div>

const myAutoCompleteValues = document.getElementById('myAutoCompleteValues')

if (myAutoCompleteValues) {
  new coreui.Autocomplete(myAutoCompleteValues, {
    cleaner: true,
    indicator: true,
    name: 'autocomplete-option-values',
    options: [
      { label: 'Product A', value: 1 },
      { label: 'Product B', value: 2 },
      { label: 'Product C', value: 3.5 },
      { label: 'Product D', value: 42 },
      {
        label: 'Categories',
        options: [
          { label: 'Electronics', value: 100 },
          { label: 'Books', value: 200 },
          { label: 'Clothing', value: 300 }
        ]
      }
    ],
    placeholder: 'Select product by ID...',
    search: 'global',
    value: 100
  })

  // Log the selected value to demonstrate that numbers are converted to strings
  myAutoCompleteValues.addEventListener('changed.coreui.autocomplete', event => {
    // eslint-disable-next-line no-console
    console.log('Selected value:', event.value.value)
    // eslint-disable-next-line no-console
    console.log('Selected label:', event.value.label)
  })
}

Important: While you can pass number values in your options, the component internally converts all values to strings using String(value). When handling selection events, remember that event.value.value will always be a string representation of your original number.

For example:

• Input: { label: 'Product A', value: 42 }
• Internal storage: { label: 'Product A', value: '42' }
• Event output: event.value.value === '42' (string)

You can configure CoreUI’s AutoComplete component to fetch and display options dynamically from an external API. This is useful when you need to autocomplete data that changes frequently or is too large to preload.

This example shows how to connect the AutoComplete to a remote API to search users by first name.

<div id="myAutoCompleteExternalData"></div>

To fetch data from an external source, you must set the search option to 'external' or ['external', 'global']. This disables internal filtering and allows you to provide custom data (e.g., from an API) based on user input.

const myAutoCompleteExternalData = document.getElementById('myAutoCompleteExternalData')

if (myAutoCompleteExternalData) {
  const getUsers = async (name = '') => {
    try {
      const response = await fetch(`https://apitest.coreui.io/demos/users?first_name=${name}&limit=10`)
      const users = await response.json()

      return users.records.map(user => ({
        value: user.id,
        label: user.first_name
      }))
    } catch (error) {
      // eslint-disable-next-line no-console
      console.error('Error fetching users:', error)
    }
  }

  const autocomplete = new coreui.Autocomplete(myAutoCompleteExternalData, {
    cleaner: true,
    highlightOptionsOnSearch: true,
    name: 'autocomplete-external',
    options: [],
    placeholder: 'Search names...',
    search: ['external', 'global'], // 🔴 'external' is required for external search
    showHints: true
  })

  let lastQuery = null
  let debounceTimer = null

  myAutoCompleteExternalData.addEventListener('show.coreui.autocomplete', async () => {
    const users = await getUsers()
    autocomplete.update({ options: users })
  })

  myAutoCompleteExternalData.addEventListener('input.coreui.autocomplete', event => {
    const query = event.value

    if (query === lastQuery) {
      return
    }

    lastQuery = query

    clearTimeout(debounceTimer)

    debounceTimer = setTimeout(async () => {
      const users = await getUsers(query)
      autocomplete.update({ options: users })
    }, 200)
  })
}

Configure the search behavior within the component. The data-coreui-search option determines how the search input operates and provides different search modes.

By default, search applies only while the input field is focused:

<div data-coreui-toggle="autocomplete" data-coreui-options="Angular, Bootstrap, React.js, Vue.js" data-coreui-placeholder="Search technologies..."></div>

Enable global search functionality that works across the entire component, regardless of focus position:

<div data-coreui-toggle="autocomplete" data-coreui-search="global" data-coreui-options="Angular, Bootstrap, React.js, Vue.js" data-coreui-placeholder="Global search enabled..."></div>

Use external search mode to fetch data dynamically from a server or API. This disables internal filtering and delegates the search logic entirely to your application via JavaScript:

<div id="myAutoCompleteExternalDataExample"></div>

const autocomplete = new coreui.AutoComplete(myAutoCompleteExternalDataExample, {
  search: 'external', // Required for remote data sources
  options: [],
  placeholder: 'Search technologies...'
})

myAutoCompleteExternalDataExample.addEventListener('input.coreui.autocomplete', async event => {
  const query = event.value
  const response = await fetch(`https://example.com/api?q=${query}`)
  const results = await response.json()

  autocomplete.update({
    options: results.map(item => ({
      value: item.id,
      label: item.name
    }))
  })
})

When search: 'external' is used, the component no longer filters options internally — you must handle all data fetching and filtering logic manually.

You can combine it with 'global' (e.g. search: ['external', 'global']) to allow search input even when focus is not in the text field.

Restrict users to only select from predefined options by setting data-coreui-allow-only-defined-options="true":

<div data-coreui-toggle="autocomplete" data-coreui-allow-only-defined-options="true" data-coreui-options="Angular, Bootstrap, React.js, Vue.js" data-coreui-placeholder="Only predefined options allowed..."></div>

Enable intelligent hints and auto-completion features to improve user experience.

Display completion hints as users type:

<div data-coreui-toggle="autocomplete" data-coreui-options="Angular, Bootstrap, React.js, Vue.js" data-coreui-placeholder="Type to see hints..." data-coreui-show-hints="true"></div>

Highlight matching portions of suggestions during search:

<div data-coreui-toggle="autocomplete" data-coreui-highlight-options-on-search="true" data-coreui-options="Angular, Bootstrap, React.js, Vue.js" data-coreui-placeholder="Search with highlighting..."></div>

Apply validation styling to indicate input validity.

<div data-coreui-toggle="autocomplete" data-coreui-options="Angular, Bootstrap, React.js, Vue.js" data-coreui-placeholder="Valid autocomplete..." data-coreui-valid="true"></div>

<div data-coreui-toggle="autocomplete" data-coreui-options="Angular, Bootstrap, React.js, Vue.js" data-coreui-placeholder="Invalid autocomplete..." data-coreui-invalid="true"></div>

Add the data-coreui-disabled="true" attribute to disable the component:

<div data-coreui-toggle="autocomplete" data-coreui-disabled="true" data-coreui-options="" data-coreui-placeholder="Disabled autocomplete..." ></div>

You may also choose from small and large auto completes to match our similarly sized text inputs.

<div 
  class="autocomplete-lg"
  data-coreui-cleaner="true"
  data-coreui-highlight-options-on-search="true"
  data-coreui-indicator="true"
  data-coreui-options="Angular, Bootstrap, React.js, Vue.js"
  data-coreui-placeholder="Large autocomplete..."
  data-coreui-search="global"
  data-coreui-show-hints="true"
  data-coreui-toggle="autocomplete"
></div>
<div 
  data-coreui-cleaner="true"
  data-coreui-highlight-options-on-search="true"
  data-coreui-indicator="true"
  data-coreui-options="Angular, Bootstrap, React.js, Vue.js"
  data-coreui-placeholder="Normal autocomplete..."
  data-coreui-search="global"
  data-coreui-show-hints="true"
  data-coreui-toggle="autocomplete"
></div>
<div 
  class="autocomplete-sm"
  data-coreui-cleaner="true"
  data-coreui-highlight-options-on-search="true"
  data-coreui-indicator="true"
  data-coreui-options="Angular, Bootstrap, React.js, Vue.js"
  data-coreui-placeholder="Small autocomplete..."
  data-coreui-search="global"
  data-coreui-show-hints="true"
  data-coreui-toggle="autocomplete"
></div>

Enable a cleaner button to quickly clear input element:

<div data-coreui-toggle="autocomplete" data-coreui-cleaner="true" data-coreui-options="Angular, Bootstrap, React.js, Vue.js" data-coreui-placeholder="With cleaner button..."></div>

The CoreUI Bootstrap Autocomplete Component provides the flexibility to personalize options and group labels by utilizing custom templates. You can easily customize the options using the optionsTemplate, and for groups, you can use optionsGroupsTemplate, as demonstrated in the examples below:

<div class="row">
  <div class="col-md-6">
    <div id="myAutocompleteCountries"></div>
  </div>
  <div class="col-md-6">
    <div id="myAutocompleteCountriesAndCities"></div>
  </div>
</div>

We use the following JavaScript to set up our autocomplete:

const myAutocompleteCountries = document.getElementById('myAutocompleteCountries')
const myAutocompleteCountriesAndCities = document.getElementById('myAutocompleteCountriesAndCities')

if (myAutocompleteCountries && myAutocompleteCountriesAndCities) {
  const countries = [
    {
      value: 'pl',
      label: 'Poland',
      flag: '🇵🇱'
    },
    {
      value: 'de',
      label: 'Germany',
      flag: '🇩🇪'
    },
    {
      value: 'us',
      label: 'United States',
      flag: '🇺🇸'
    },
    {
      value: 'es',
      label: 'Spain',
      flag: '🇪🇸'
    },
    {
      value: 'gb',
      label: 'United Kingdom',
      flag: '🇬🇧'
    }
  ]

  const cities = [
    {
      label: 'United States',
      code: 'us',
      flag: '🇺🇸',
      options: [
        {
          value: 'au',
          label: 'Austin'
        },
        {
          value: 'ch',
          label: 'Chicago'
        },
        {
          value: 'la',
          label: 'Los Angeles'
        },
        {
          value: 'ny',
          label: 'New York'
        },
        {
          value: 'sa',
          label: 'San Jose'
        }
      ]
    },
    {
      label: 'United Kingdom',
      code: 'gb',
      flag: '🇬🇧',
      options: [
        {
          value: 'li',
          label: 'Liverpool'
        },
        {
          value: 'lo',
          label: 'London'
        },
        {
          value: 'ma',
          label: 'Manchester'
        }
      ]
    }
  ]

  new coreui.Autocomplete(myAutocompleteCountries, {
    cleaner: true,
    indicator: true,
    options: countries,
    optionsTemplate(option) {
      return `<div class="d-flex align-items-center gap-2"><span class="fs-5">${option.flag}</span><span>${option.label}</span></div>`
    },
    placeholder: 'Select country',
    showHints: true,
    search: 'global'
  })

  new coreui.Autocomplete(myAutocompleteCountriesAndCities, {
    cleaner: true,
    indicator: true,
    options: cities,
    optionsGroupsTemplate(optionGroup) {
      return `<div class="d-flex align-items-center gap-2"><span class="text-body fs-5">${optionGroup.flag}</span><span>${optionGroup.label}</span></div>`
    },
    placeholder: 'Select city',
    showHints: true,
    search: 'global'
  })
}

Heads up! In our documentation, all examples show standard CoreUI implementation. If you are using a Bootstrap-compatible version of CoreUI, remember to use the following changes:

• In the constructor, please use bootstrap instead of coreui. For example, new bootstrap.Alert(...) instead of new coreui.Alert(...)
• In events, please use bs instead of coreui, for example close.bs.alert instead of close.coreui.alert
• In data attributes, please use bs instead of coreui. For example, data-bs-toggle="..." instead of data-coreui-toggle="..."

Add autocomplete class to a container element with an input field:

<div data-coreui-toggle="autocomplete" data-coreui-search="true"></div>

Initialize the autocomplete component via JavaScript:

<div data-coreui-toggle="autocomplete"></div>

const autoCompleteElementList = Array.prototype.slice.call(document.querySelectorAll('.autocomplete'))
const autoCompleteList = autoCompleteElementList.map(autoCompleteEl => {
  return new coreui.Autocomplete(autoCompleteEl, {
    options: [
      'JavaScript',
      'TypeScript',
      'React',
      'Vue.js',
      'Angular'
    ],
    search: 'global'
  })
})

Options can be passed using data attributes or JavaScript. To do this, append an option name to data-coreui-, such as data-coreui-animation="{value}". Remember to convert the case of the option name from “camelCase” to “kebab-case” when using data attributes. For instance, you should write data-coreui-custom-class="beautifier" rather than data-coreui-customClass="beautifier".

Starting with CoreUI 4.2.0, all components support an experimental reserved data attribute named data-coreui-config, which can contain simple component configurations as a JSON string. If an element has attributes data-coreui-config='{"delay":50, "title":689}' and data-coreui-title="Custom Title", then the final value for title will be Custom Title, as the standard data attributes will take precedence over values specified in data-coreui-config. Moreover, existing data attributes can also hold JSON values like data-coreui-delay='{"show":50, "hide":250}'.

The Autocomplete component exposes several events for integrating with application logic.

const myAutocomplete = document.getElementById('myAutocomplete')
myAutocomplete.addEventListener('changed.coreui.autocomplete', event => {
  // Get the selected value
  const selectedValue = event.value
  // Your callback function to handle change
  // eslint-disable-next-line no-console
  console.log('Selected:', selectedValue)
})

myAutocomplete.addEventListener('input.coreui.autocomplete', event => {
  // Get the current input value
  const inputValue = event.value
  // Your callback function to handle input
  // eslint-disable-next-line no-console
  console.log('Input changed:', inputValue)
})

The Autocomplete component includes several accessibility features:

• ARIA attributes: Proper role, aria-expanded, aria-haspopup, and aria-autocomplete attributes
• Screen reader support: Descriptive labels and announcements for state changes
• Keyboard navigation: Full keyboard support with arrow keys, Enter, Escape, and Tab
• Focus management: Proper focus handling and visual focus indicators
• Semantic markup: Uses appropriate HTML elements and structure

Autocomplete components use local CSS variables on .autocomplete for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported.

--cui-autocomplete-zindex: #{$autocomplete-zindex};
--cui-autocomplete-font-family: #{$autocomplete-font-family};
--cui-autocomplete-font-size: #{$autocomplete-font-size};
--cui-autocomplete-font-weight: #{$autocomplete-font-weight};
--cui-autocomplete-line-height: #{$autocomplete-line-height};
--cui-autocomplete-color: #{$autocomplete-color};
--cui-autocomplete-bg: #{$autocomplete-bg};
--cui-autocomplete-box-shadow: #{$autocomplete-box-shadow};
--cui-autocomplete-border-width: #{$autocomplete-border-width};
--cui-autocomplete-border-color: #{$autocomplete-border-color};
--cui-autocomplete-border-radius: #{$autocomplete-border-radius};
--cui-autocomplete-disabled-color: #{$autocomplete-disabled-color};
--cui-autocomplete-disabled-bg: #{$autocomplete-disabled-bg};
--cui-autocomplete-disabled-border-color: #{$autocomplete-disabled-border-color};
--cui-autocomplete-focus-color: #{$autocomplete-focus-color};
--cui-autocomplete-focus-bg: #{$autocomplete-focus-bg};
--cui-autocomplete-focus-border-color: #{$autocomplete-focus-border-color};
--cui-autocomplete-focus-box-shadow: #{$autocomplete-focus-box-shadow};
--cui-autocomplete-placeholder-color: #{$autocomplete-placeholder-color};
--cui-autocomplete-padding-y: #{$autocomplete-padding-y};
--cui-autocomplete-padding-x: #{$autocomplete-padding-x};
--cui-autocomplete-cleaner-width: #{$autocomplete-cleaner-width};
--cui-autocomplete-cleaner-height: #{$autocomplete-cleaner-height};
--cui-autocomplete-cleaner-padding-y: #{$autocomplete-cleaner-padding-y};
--cui-autocomplete-cleaner-padding-x: #{$autocomplete-cleaner-padding-x};
--cui-autocomplete-cleaner-icon: #{escape-svg($autocomplete-cleaner-icon)};
--cui-autocomplete-cleaner-icon-color: #{$autocomplete-cleaner-icon-color};
--cui-autocomplete-cleaner-icon-hover-color: #{$autocomplete-cleaner-icon-hover-color};
--cui-autocomplete-cleaner-icon-size: #{$autocomplete-cleaner-icon-size};
--cui-autocomplete-indicator-width: #{$autocomplete-indicator-width};
--cui-autocomplete-indicator-height: #{$autocomplete-indicator-height};
--cui-autocomplete-indicator-padding-y: #{$autocomplete-indicator-padding-y};
--cui-autocomplete-indicator-padding-x: #{$autocomplete-indicator-padding-x};
--cui-autocomplete-indicator-icon: #{escape-svg($autocomplete-indicator-icon)};
--cui-autocomplete-indicator-icon-color: #{$autocomplete-indicator-icon-color};
--cui-autocomplete-indicator-icon-hover-color: #{$autocomplete-indicator-icon-hover-color};
--cui-autocomplete-indicator-icon-size: #{$autocomplete-indicator-icon-size};
--cui-autocomplete-dropdown-min-width: #{$autocomplete-dropdown-min-width};
--cui-autocomplete-dropdown-bg: #{$autocomplete-dropdown-bg};
--cui-autocomplete-dropdown-border-width: #{$autocomplete-dropdown-border-width};
--cui-autocomplete-dropdown-border-color: #{$autocomplete-dropdown-border-color};
--cui-autocomplete-dropdown-border-radius: #{$autocomplete-dropdown-border-radius};
--cui-autocomplete-dropdown-box-shadow: #{$autocomplete-dropdown-box-shadow};
--cui-autocomplete-options-padding-y: #{$autocomplete-options-padding-y};
--cui-autocomplete-options-padding-x: #{$autocomplete-options-padding-x};
--cui-autocomplete-options-font-size: #{$autocomplete-options-font-size};
--cui-autocomplete-options-font-weight: #{$autocomplete-options-font-weight};
--cui-autocomplete-options-color: #{$autocomplete-options-color};
--cui-autocomplete-optgroup-label-padding-y: #{$autocomplete-optgroup-label-padding-y};
--cui-autocomplete-optgroup-label-padding-x: #{$autocomplete-optgroup-label-padding-x};
--cui-autocomplete-optgroup-label-font-size: #{$autocomplete-optgroup-label-font-size};
--cui-autocomplete-optgroup-label-font-weight: #{$autocomplete-optgroup-label-font-weight};
--cui-autocomplete-optgroup-label-color: #{$autocomplete-optgroup-label-color};
--cui-autocomplete-optgroup-label-text-transform: #{$autocomplete-optgroup-label-text-transform};
--cui-autocomplete-option-padding-y: #{$autocomplete-option-padding-y};
--cui-autocomplete-option-padding-x: #{$autocomplete-option-padding-x};
--cui-autocomplete-option-margin-y: #{$autocomplete-option-margin-y};
--cui-autocomplete-option-margin-x: #{$autocomplete-option-margin-x};
--cui-autocomplete-option-border-width: #{$autocomplete-option-border-width};
--cui-autocomplete-option-border-color: #{$autocomplete-option-border-color};
--cui-autocomplete-option-border-radius: #{$autocomplete-option-border-radius};
--cui-autocomplete-option-box-shadow: #{$autocomplete-option-box-shadow};
--cui-autocomplete-option-hover-color: #{$autocomplete-option-hover-color};
--cui-autocomplete-option-hover-bg: #{$autocomplete-option-hover-bg};
--cui-autocomplete-option-focus-box-shadow: #{$autocomplete-option-focus-box-shadow};
--cui-autocomplete-option-disabled-color: #{$autocomplete-option-disabled-color};
--cui-autocomplete-option-indicator-width: #{$autocomplete-option-indicator-width};
--cui-autocomplete-option-indicator-bg: #{$autocomplete-option-indicator-bg};
--cui-autocomplete-option-indicator-border: #{$autocomplete-option-indicator-border};
--cui-autocomplete-option-indicator-border-radius: #{$autocomplete-option-indicator-border-radius};
--cui-autocomplete-option-selected-bg: #{$autocomplete-option-selected-bg};
--cui-autocomplete-option-selected-indicator-bg: #{$autocomplete-option-selected-indicator-bg};
--cui-autocomplete-option-selected-indicator-bg-image: #{escape-svg($autocomplete-option-selected-indicator-bg-image)};
--cui-autocomplete-option-selected-indicator-border-color: #{$autocomplete-option-selected-indicator-border-color};

$autocomplete-zindex:                    1000;
$autocomplete-font-family:               $input-font-family;
$autocomplete-font-size:                 $input-font-size;
$autocomplete-font-weight:               $input-font-weight;
$autocomplete-line-height:               $input-line-height;
$autocomplete-padding-y:                 $input-padding-y;
$autocomplete-padding-x:                 $input-padding-x;
$autocomplete-color:                     $input-color;
$autocomplete-bg:                        $input-bg;
$autocomplete-box-shadow:                $box-shadow-inset;

$autocomplete-border-width:              $input-border-width;
$autocomplete-border-color:              $input-border-color;
$autocomplete-border-radius:             $input-border-radius;
$autocomplete-border-radius-sm:          $input-border-radius-sm;
$autocomplete-border-radius-lg:          $input-border-radius-lg;

$autocomplete-disabled-color:            $input-disabled-color;
$autocomplete-disabled-bg:               $input-disabled-bg;
$autocomplete-disabled-border-color:     $input-disabled-border-color;

$autocomplete-focus-color:               $input-focus-color;
$autocomplete-focus-bg:                  $input-focus-bg;
$autocomplete-focus-border-color:        $input-focus-border-color;
$autocomplete-focus-box-shadow:          $input-btn-focus-box-shadow;

$autocomplete-placeholder-color:         var(--#{$prefix}secondary-color);

$autocomplete-invalid-border-color:      $form-invalid-border-color;
$autocomplete-valid-border-color:        $form-valid-border-color;

$autocomplete-cleaner-width:             1.5rem;
$autocomplete-cleaner-height:            1.5rem;
$autocomplete-cleaner-padding-x:         0;
$autocomplete-cleaner-padding-y:         0;
$autocomplete-cleaner-icon:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#000'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
$autocomplete-cleaner-icon-color:        var(--#{$prefix}tertiary-color);
$autocomplete-cleaner-icon-hover-color:  var(--#{$prefix}body-color);
$autocomplete-cleaner-icon-size:         .625rem;

$autocomplete-indicator-width:             1.5rem;
$autocomplete-indicator-height:            1.5rem;
$autocomplete-indicator-padding-x:         0;
$autocomplete-indicator-padding-y:         0;
$autocomplete-indicator-icon:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='#000'><path d='M256.045 416.136.717 160.807l29.579-29.579 225.749 225.748 225.749-225.748 29.579 29.579-255.328 255.329z'/></svg>");
$autocomplete-indicator-icon-color:        var(--#{$prefix}tertiary-color);
$autocomplete-indicator-icon-hover-color:  var(--#{$prefix}body-color);
$autocomplete-indicator-icon-size:         .75rem;

$autocomplete-dropdown-min-width:        100%;
$autocomplete-dropdown-bg:               var(--#{$prefix}body-bg);
$autocomplete-dropdown-border-color:     var(--#{$prefix}border-color);
$autocomplete-dropdown-border-width:     var(--#{$prefix}border-width);
$autocomplete-dropdown-border-radius:    var(--#{$prefix}border-radius);
$autocomplete-dropdown-box-shadow:       var(--#{$prefix}box-shadow);

$autocomplete-options-padding-y:         .5rem;
$autocomplete-options-padding-x:         .5rem;
$autocomplete-options-font-size:         $font-size-base;
$autocomplete-options-font-weight:       $font-weight-normal;
$autocomplete-options-color:             var(--#{$prefix}body-color);

$autocomplete-optgroup-label-padding-y:       .5rem;
$autocomplete-optgroup-label-padding-x:       .625rem;
$autocomplete-optgroup-label-font-size:       80%;
$autocomplete-optgroup-label-font-weight:     $font-weight-bold;
$autocomplete-optgroup-label-color:           var(--#{$prefix}tertiary-color);
$autocomplete-optgroup-label-text-transform:  uppercase;

$autocomplete-option-padding-y:               .5rem;
$autocomplete-option-padding-x:               .75rem;
$autocomplete-option-margin-y:                1px;
$autocomplete-option-margin-x:                0;
$autocomplete-option-border-width:            $input-border-width;
$autocomplete-option-border-color:            transparent;
$autocomplete-option-border-radius:           var(--#{$prefix}border-radius);
$autocomplete-option-box-shadow:              $box-shadow-inset;

$autocomplete-option-hover-color:             var(--#{$prefix}body-color);
$autocomplete-option-hover-bg:                var(--#{$prefix}tertiary-bg);

$autocomplete-option-focus-box-shadow:        $input-btn-focus-box-shadow;

$autocomplete-option-indicator-width:          1em;
$autocomplete-option-indicator-bg:             $form-check-input-bg;
$autocomplete-option-indicator-border:         $form-check-input-border;
$autocomplete-option-indicator-border-radius:  .25em;

$autocomplete-option-selected-bg:                      var(--#{$prefix}secondary-bg);
$autocomplete-option-selected-indicator-bg:            $form-check-input-checked-bg-color;
$autocomplete-option-selected-indicator-bg-image:      $form-check-input-checked-bg-image;
$autocomplete-option-selected-indicator-border-color:  $autocomplete-option-selected-indicator-bg;

$autocomplete-option-disabled-color:        var(--#{$prefix}secondary-color);

$autocomplete-font-size-lg:                 $input-font-size-lg;
$autocomplete-padding-y-lg:                 $input-padding-y-lg;
$autocomplete-padding-x-lg:                 $input-padding-x-lg;

$autocomplete-font-size-sm:                 $input-font-size-sm;
$autocomplete-padding-y-sm:                 $input-padding-y-sm;
$autocomplete-padding-x-sm:                 $input-padding-x-sm;

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4