Corsi on-line

Auto-completamento di Amazon con JavaScript

Amazon Autocomplete è un plugin realizzato in puro linguaggio JavaScript che permette di accedere in modo completo alle funzionalità per l’auto-completamento degli input di ricerca messe a disposizione dall’engine della nota piattaforma per il commercio elettronico. Si tratta di uno strumento finalizzato al miglioramento della user experience che consentirà di digitare keyword di ricerca in modo più preciso e con maggiore velocità.

cattura

Una volta scaricato il package della libreria, sarà possibile prelevare manualmente il file minificato dalla cartella dist o quello completo (consigliato agli sviluppatori che vogliano contribuire al progetto) dalla directory src; molto più immediata e automatizzata risulterà invece l’installazione tramite npm (node package manager):

npm install --save amazon-autocomplete

in alternativa è possibile eseguire la medesima procedura tramite un altro gestore di dipendenze, yarn:

yarn add amazon-autocomplete

Una volta completata la fase d’installazione si potrà procedere con la chiamata della libreria all’interno della propria pagina Web, facendo attenzione che il percorso ad essa venga specificato in modo corretto:

<html>
  <body>
    ...
    <script src="/percorso/amazon-autocomplete.min.js" type="text/javascript"></script>
  </body>
</html>

Non resterà quindi che creare il form per le ricerche partendo da un semplice campo di testo per l’invio dell’input all’engine:

<input type="text" id="search-input"/>

A questo punto il campo per le ricerche verrà associato ad un selettore CSS, denominato search-input nel nostro esempio, e quest’ultimo potrà essere richiamato passandolo come argomento all’oggetto AmazonAutocomplete():

let searchInput = new AmazonAutocomplete('#search-input');

E’ possibile qualsiasi tipo di personalizzazione a livello grafico tramite regole di stile, la documentazione ufficiale di Amazon Autocomplete offre inoltre una vasta gamma di parametri per la modifica dei comportamenti in fase di auto-completamento. Per il recupero dei dati da Amazon viene utilizzata l’estensione JSONP che consente agli sviluppatori di bypassare le limitazioni cross-domain nell’interscambio di dati tra diverse piattaforme.

Via Amazon Autocomplete

Post correlati
I più letti del mese
Tematiche