0

I have setup a very simple complete.ly text box but my options are not showing. I suspect it's something obvious that I have missed.

It really is a very basic example :

var strategyChoice = ["a", "b", "c"];

$(function() {

var pv = completely(document.getElementById('container'));

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;
    }
}

This fiddle shows the issue.

Chapo
  • 2,563
  • 3
  • 30
  • 60

1 Answers1

1

It looks like your primary issues are:

a) Forgetting to set the 'startFrom' property to the length of the current input text

b) Forgetting to add a space on the end of some of your option values

Here is slightly re-worked version of your example:

var strategyChoice = ['a', 'b', 'c'];
var pv = completely(document.getElementById('container'),{color:'black'});

pv.onChange = function(text) {
  if (text === 'i' || text === 'I') {
    pv.setText('I want to ');
    return;
  }
  if (text === 'I want to ') {
    pv.options = ['pay ', 'receive '];
    pv.startFrom = text.length;
    pv.repaint();
    return;
  }
  if (['I want to pay ', 'I want to receive '].includes(text)) {
    pv.options = strategyChoice;
    pv.startFrom = text.length;
    pv.repaint();
    return;
  }
};

pv.options = ['I want to pay ', 'I want to receive '];

setTimeout(function() {
  pv.input.focus();
  pv.setText('I ');
  pv.repaint();
}, 0);
<script src="https://lorenzoongithub.github.io/completely/complete.ly.1.0.1.min.js"></script>
<div id='container'></div>
ansibly
  • 398
  • 3
  • 7