85 lines
2.2 KiB
JavaScript
85 lines
2.2 KiB
JavaScript
const Routing = require('../../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js')
|
|
const routes = require('../../../public/js/fos_js_routes.json')
|
|
|
|
Routing.setRoutingData(routes)
|
|
|
|
class AddressAutocomplete {
|
|
constructor () {
|
|
this.fields = {
|
|
address: document.querySelector('#establishment_address'),
|
|
zipCode: document.querySelector('#establishment_zipCode'),
|
|
city: document.querySelector('#establishment_city')
|
|
}
|
|
|
|
this.results = []
|
|
this.timer = null
|
|
|
|
if (!this.fields.address) {
|
|
return
|
|
}
|
|
|
|
const that = this
|
|
|
|
this.fields.address.addEventListener('keyup', () => {
|
|
if (that.timer) {
|
|
clearTimeout(that.timer)
|
|
}
|
|
|
|
that.timer = setTimeout(() => {
|
|
const query = that.fields.address.value
|
|
|
|
fetch(Routing.generate('admin_establishment_address', {
|
|
q: query
|
|
}))
|
|
.then(response => response.json())
|
|
.then((data) => {
|
|
that.results = data.features
|
|
that.renderResults()
|
|
})
|
|
}, 500)
|
|
})
|
|
}
|
|
|
|
renderResults () {
|
|
const address = this.fields.address
|
|
const that = this
|
|
|
|
let wrapper = address.nextSibling
|
|
|
|
if (wrapper) {
|
|
wrapper.remove()
|
|
}
|
|
|
|
if (this.results.length === 0) {
|
|
return
|
|
}
|
|
|
|
wrapper = document.createElement('div')
|
|
wrapper.classList.add('list-group', 'mt-1', 'mb-1')
|
|
|
|
for (const address of this.results) {
|
|
const item = document.createElement('div')
|
|
item.classList.add('list-group-item', 'btn', 'text-left')
|
|
item.textContent = address.properties.label
|
|
|
|
item.setAttribute('data-name', address.properties.name)
|
|
item.setAttribute('data-zipCode', address.properties.postcode)
|
|
item.setAttribute('data-city', address.properties.city)
|
|
|
|
item.addEventListener('click', (e) => {
|
|
that.fields.address.value = e.target.getAttribute('data-name')
|
|
that.fields.zipCode.value = e.target.getAttribute('data-zipCode')
|
|
that.fields.city.value = e.target.getAttribute('data-city')
|
|
|
|
wrapper.remove()
|
|
})
|
|
|
|
wrapper.appendChild(item)
|
|
}
|
|
|
|
address.parentNode.appendChild(wrapper)
|
|
}
|
|
}
|
|
|
|
module.exports = AddressAutocomplete
|