65 lines
2.4 KiB
HTML
65 lines
2.4 KiB
HTML
|
|
{{ define "address_autocomplete" }}
|
|
|
|
<div class="col-span-6 relative" x-data='{
|
|
input: {{if .Address}}"{{.Address.Properties.label}}"{{else}}null{{end}},
|
|
address: {{if .Address}}JSON.stringify({{template "geojson" .Address}}){{else}}null{{end}},
|
|
addressObject: {{if .Address}}{{template "geojson" .Address }}{{else}}null{{end}},
|
|
responselength: 0,
|
|
async autocomplete() {
|
|
if(this.input == null || this.input == "") {
|
|
this.responselength = 0
|
|
return []
|
|
}
|
|
if(this.addressObject != null && this.input == this.addressObject.properties.label) {
|
|
this.responselength = 0
|
|
return []
|
|
}
|
|
if(this.input.length < 3) {
|
|
this.responselength = 0
|
|
return []
|
|
}
|
|
result = await fetch("https://api-adresse.data.gouv.fr/search/?q=" + this.input)
|
|
json = await result.json()
|
|
console.log(json)
|
|
|
|
this.responselength = json["features"].length
|
|
return json["features"]
|
|
},
|
|
select(a) {
|
|
this.address = JSON.stringify(a)
|
|
this.addressObject = a
|
|
this.input = a.properties.label
|
|
}
|
|
}'>
|
|
<input type="hidden" name="{{ .FieldName }}" x-model="address">
|
|
<label for="address" class="block text-sm font-medium text-gray-700">{{ if .FieldLabel }}{{.FieldLabel}}{{else}}Adresse{{end}}</label>
|
|
<input type="text"
|
|
class="p-2 mt-1 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm border-gray-300 rounded-2xl"
|
|
x-model="input">
|
|
|
|
<ul x-show="responselength > 0"
|
|
class="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-xl py-1 text-base overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox" aria-labelledby="listbox-label" aria-activedescendant="listbox-option-3">
|
|
<template x-for="item in autocomplete">
|
|
<a href="#">
|
|
<li class="text-gray-900 hover:bg-gray-200 cursor-default select-none relative py-2 pl-3 pr-9"
|
|
@click="select(item)">
|
|
<span class="font-normal block truncate" x-text="item.properties.label" ></span>
|
|
</li>
|
|
</a>
|
|
</template>
|
|
</ul>
|
|
</div>
|
|
{{ end }}
|
|
|
|
{{define "geojson"}}{
|
|
"type": "Feature",
|
|
"geometry": {
|
|
"type": "Point",
|
|
"coordinates": [{{index .Point 0}}, {{index .Point 1}}],
|
|
},
|
|
"properties": {
|
|
"label": "{{.Properties.label}}"
|
|
}
|
|
}{{end}}
|