Corsi on-line

Autocompletamento degli indirizzi con Algolia Places

Algolia Places fornisce una libreria JavaScript per l’autocompletamento degli indirizzi nei campi input dei form online, si tratta in sostanza di una soluzione semplice e veloce per migliorare la user experience durante la compilazione dei moduli per il feedback presenti nei siti Web. Rilasciata sotto licenza Open Source, si presenta come una risorsa veloce e distribuita basata su un database in continua espansione.

AlgoliaL’archivio di riferimento scelto dagli sviluppatori è quello di OpenStreetMap, un progetto concepito per realizzare e rendere accessibili dati cartografici a chiunque, gratuitamente. Parliamo di una piattaforma concepita perché gran parte delle mappe digitali oggi disponibili in Internet (si pensi per esempio alle Google Maps) presentano delle restrizioni di carattere tecnico o legale e, in alcuni casi, non possono essere adottate per scopi creativi o commerciali.

Algolia Places semplifica la digitazione dei parametri richiesti dai form completando più campi di input in una volta sola, contemporaneamente, evita il ricorso allo scrolling per il reperimento della località desiderata e, caratteristica molto interessante nella progettazione delle interfacce utente, consente di visualizzare in tempo reale l’immagine della mappa associata all’indirizzo inserito nel campo di input.

La libreria è modulare e permette l’estensione delle funzionalità di base tramite plugin, ad esempio autocomplete.js per l’autocompletamento e instantsearch.js per le ricerche. Per includerla nelle proprie pagine è possibile ricorrere ad un comodo CDN (Content Delivery Network):

<script src="https://cdn.jsdelivr.net/places.js/1/places.min.js"></script>

Fatto questo basterà creare il codice del campo di input:

<input type="search" id="address-input" placeholder="Dove abiti?" />

e implementare il codice JavaScript per l’autocompletamento:

<script>
  var placesAutocomplete = places({
    container: document.querySelector('#address-input')
  });
</script>

In alternativa è possibile scaricare la libreria in locale o installarla come modulo npm:

npm install places.js --save

e procedere con la sua chiamata da JavaScript:

var places = require('places.js');
var placesAutocomplete = places({
  container: document.querySelector('#address-input')
});

Nel sito ufficiale del progetto è presente una documentazione completa sull’utilizzo della libreria e numerosi snippet personalizzabili da adattare ai propri progetti.

Via Algolia Places

Post correlati
I più letti del mese
Tematiche