javascript - complete.ly 库中未显示的选项

Question

我设置了一个非常简单的complete.ly文本框，但我的选项没有显示。我怀疑我错过了一些显而易见的事情。

这确实是一个非常基本的例子：

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

这个小提琴显示了这个问题。

Answer 1

看起来您的主要问题是：

a) 忘记将“startFrom”属性设置为当前输入文本的长度

b）忘记在某些选项值的末尾添加一个空格

这是您的示例的稍微修改的版本：

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>