How to use @pluginjs/auto-complete - 10 common examples
To help you get started, we’ve selected a few @pluginjs/auto-complete examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
pluginjs / pluginjs / modules / place-complete / src / constant.js View on Github 
import AutoComplete from '@pluginjs/auto-complete'
import { deepMerge } from '@pluginjs/utils'
export const namespace = 'placeComplete'
export const events = deepMerge(AutoComplete.events, {
ERROR: 'error',
PLACECHANGE: 'placeChange'
})
export const classes = deepMerge(AutoComplete.classes, {
NAMESPACE: 'pj-autoComplete',
WRAP: '{namespace} pj-autoComplete-place',
ITEMQUERY: '{namespace}-item-query',
ITEMSECONDARY: '{namespace}-item-secondary'
})
export const methods = deepMerge(AutoComplete.methods, [])
export const defaults = deepMerge(AutoComplete.defaults, {
apiKey: 'AIzaSyDSx-q31rWQKqLwUahg6TrZ3R_5NT0LhFE',
minChars: 2,
searchOptions: {},
country: null, // []
types: ['geocode'],
match(data) {
return dataexport const namespace = 'placeComplete'
export const events = deepMerge(AutoComplete.events, {
ERROR: 'error',
PLACECHANGE: 'placeChange'
})
export const classes = deepMerge(AutoComplete.classes, {
NAMESPACE: 'pj-autoComplete',
WRAP: '{namespace} pj-autoComplete-place',
ITEMQUERY: '{namespace}-item-query',
ITEMSECONDARY: '{namespace}-item-secondary'
})
export const methods = deepMerge(AutoComplete.methods, [])
export const defaults = deepMerge(AutoComplete.defaults, {
apiKey: 'AIzaSyDSx-q31rWQKqLwUahg6TrZ3R_5NT0LhFE',
minChars: 2,
searchOptions: {},
country: null, // []
types: ['geocode'],
match(data) {
return data
},
itemLabel(item) {
return item.description
},
itemValue(item) {
return item.description
},
templates: {
item() {import { deepMerge } from '@pluginjs/utils'
export const namespace = 'placeComplete'
export const events = deepMerge(AutoComplete.events, {
ERROR: 'error',
PLACECHANGE: 'placeChange'
})
export const classes = deepMerge(AutoComplete.classes, {
NAMESPACE: 'pj-autoComplete',
WRAP: '{namespace} pj-autoComplete-place',
ITEMQUERY: '{namespace}-item-query',
ITEMSECONDARY: '{namespace}-item-secondary'
})
export const methods = deepMerge(AutoComplete.methods, [])
export const defaults = deepMerge(AutoComplete.defaults, {
apiKey: 'AIzaSyDSx-q31rWQKqLwUahg6TrZ3R_5NT0LhFE',
minChars: 2,
searchOptions: {},
country: null, // []
types: ['geocode'],
match(data) {
return data
},
itemLabel(item) {
return item.description
},
itemValue(item) {
return item.description
},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 itemimport { 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 })@pluginjs/auto-complete
A flexible modern auto-complete js plugin.
