Qualche tempo fa avevo cominciato a sviluppare una piccola webapp ad uso interno con Vue.js e, volendo implementare dei tag, mi serviva anche un input per modificarli.

Prima che un mio amico mi consigliasse Vue-Multiselect, avevo provato diversi tag input, di cui alcuni non funzionanti, altri invece che non soddisfacevano tutti i miei requisiti: l’integrazione con Vue, la possibilità di integrarli col design del resto del sito (o quanto meno che sembrassero abbastanza coerenti con Bootstrap, visto che mi sto basando su quello) e che avessero l’autocompletamento.

Non trovandone nessuno che facesse al caso mio, ho deciso di cominciare a scrivere un input tag “universale” con queste caratteristica:

• indipendenza da qualsiasi libreria, in modo che se altri si fossero trovati nella mia situazione avrebbero potuto usarlo;
• completa libertà grafica per i designer;
• possibilità di implementare un auto completamento (scriverne uno che non abbia alcuna dipendenza è un lavoro abbastanza lungo e inutile).

Come soluzione avevo trovato di usare un div con contenteditable="true" (un attributo molto, molto vecchio, disponibile persino su Internet Explorer 6, “il terribile”) e un MutationObserver per individuare le varie modifiche fatte a questo. … [Leggi il resto]