JSFiddle - React, Tailwind, and code Playground

by chapo

HTML

<script src="https://lorenzoongithub.github.io/completely/complete.ly.1.0.1.min.js"></script>
<div id="container">

</div>

JavaScript

var strategyChoice = ["a", "b", "c"];
var pv;
$(function() {

    pv = completely(document.getElementById('container'),{color:"black"});

    pv.onChange = function(text) {

        console.log(text);

        if (text === 'i') {
            pv.setText('I want to'); // special case i becomes 'I want to'. 
            return;
        }
        if (text === 'I want to ') {
            pv.options = ["pay", "receive"];
            pv.repaint();
            console.log(pv.options);
            return;
        }
        if (["I want to pay ", "I want to receive "].includes(text)) {
            pv.options = strategyChoice;
            pv.repaint();
            console.log(pv.options);
            return;
        }
    }

    pv.options = ['I want to '];

    setTimeout(function() {
        pv.input.focus(); // IE8 requires timeout-trick to focus
        pv.setText('I want to'); // IE requires setting the text  after calling focus to ensure that the cursor is at the end of the text.
        pv.repaint();
    }, 0)

});