How to use the @pluginjs/auto-complete.of function in @pluginjs/auto-complete

import { query } from '@pluginjs/dom'
import AutoComplete from '@pluginjs/auto-complete'

const source = [
  { label: 'England', value: 'UK' },
  { label: 'China', value: 'CN' },
  { label: 'America', value: 'USA' }
]

const element = query('#obj .auto-complete-label-obj')
AutoComplete.of(element, {
  source
})

import { query } from '@pluginjs/dom'
import AutoComplete from '@pluginjs/auto-complete'

const source = [['England', 'UK'], ['China', 'CN'], ['America', 'USA']]

const element = query('#render .auto-complete-render')
AutoComplete.of(element, {
  source,
  highlight: true,
  render(data) {
    return `<span class="test">${data.label}<span>${data.value}</span></span>`
  }
})

import { countries } from 'countries-list'
import { query } from '@pluginjs/dom'
import AutoComplete from '@pluginjs/auto-complete'

const source = Object.values(countries).map(country => {
  return country.name
})

const element = query('#array .example')

AutoComplete.of(element, {
  source
})

import { query } from '@pluginjs/dom'
import AutoComplete from '@pluginjs/auto-complete'
import { continents, countries } from 'countries-list'

const source = Object.values(countries).map(country => {
  return {
    name: country.name,
    continent: country.continent
  }
})

const element = query('#group .example')
AutoComplete.of(element, {
  source,
  group: 'continent',
  groupLabel(group) {
    return group in continents ? continents[group] : 'Unknown'
  },
  itemLabel(item) {
    if (item.name) {
      return item.name
    }
    return item
  },
  itemValue(item) {
    if (item.name) {
      return item.name
    }
    return item

import { countries } from 'countries-list'
import { query } from '@pluginjs/dom'
import AutoComplete from '@pluginjs/auto-complete'

const source = Object.values(countries).map(country => {
  return country.name
})

const element = query('#disabled .example')
AutoComplete.of(element, {
  source
})

import AutoComplete from '@pluginjs/auto-complete'

const source = [
  'JAVA',
  'Java Script',
  'Go',
  'Swift',
  'C++',
  '易语言',
  'C#',
  'Python',
  'Ruby'
]

const element = query('#highlight .auto-complete-highlight')
AutoComplete.of(element, {
  highlight: true,
  source
})

import AutoComplete from '@pluginjs/auto-complete'

const source = [
  'JAVA',
  'Java Script',
  'Go',
  'Swift',
  'C++',
  '易语言',
  'C#',
  'Python',
  'Ruby'
]

const element = query('#input .input')
AutoComplete.of(element, { source })

import { countries } from 'countries-list'
import { query } from '@pluginjs/dom'
import AutoComplete from '@pluginjs/auto-complete'

const data = Object.values(countries).map(country => {
  return country.name
})

const element = query('#ajax .example')

AutoComplete.of(element, {
  source(query, resolve) {
    setTimeout(() => {
      resolve(data)
    }, 300)
  }
})

import { query } from '@pluginjs/dom'
import AutoComplete from '@pluginjs/auto-complete'
const element = query('#basic .auto-complete-basic')
AutoComplete.of(element)