javascript - 按下 TAB 时自动完成用户名

Question

我正在研究“按下 TAB 键时自动完成用户名”功能。

我已经能够检测到 @ 并在用户名列表中进行搜索。

现在如何执行自动完成，每次我们按 TAB 时都使用不同的匹配用户名？

var userlist = ['bonjour', 'bleuet', 'bonobo', 'coucou'];

function getCaretPosition(ctrl) {
    var start, end;
    if (ctrl.setSelectionRange) {
        start = ctrl.selectionStart;
        end = ctrl.selectionEnd;
    } else if (document.selection && document.selection.createRange) {
        var range = document.selection.createRange();
        start = 0 - range.duplicate().moveStart('character', -100000);
        end = start + range.text.length;
    }
    return {
        start: start,
        end: end
    }
}

$('#writing').keydown(function(e) {
    if (e.keyCode == 9) {
      var caret = getCaretPosition(this);
      var word = /\S+$/.exec(this.value.slice(0, this.value.indexOf(' ',caret.end)));
      word = word ? word[0] : null;
      if (word.charAt(0) === '@') 
        alert(userlist.filter((x) => x.indexOf(word.slice(1)) === 0));
      e.preventDefault();  
      return false;
    }

    });

#writing { width: 500px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<textarea id="writing">Hello @b what's up? hello @you as well... Type @b and then "TAB" key it should autocomplete usernames 
</textarea>

Answer 1

这是针对您的问题的解决方案:

我使用 .on() 将 keydown 绑定(bind)到文本框，而不是按键。

var userlist = ['bonjour', 'bleuet', 'bonobo', 'coucou'];

function getCaretPosition(ctrl) {
    var start, end;
    if (ctrl.setSelectionRange) {
        start = ctrl.selectionStart;
        end = ctrl.selectionEnd;
    } else if (document.selection && document.selection.createRange) {
        var range = document.selection.createRange();
        start = 0 - range.duplicate().moveStart('character', -100000);
        end = start + range.text.length;
    }
    return {
        start: start,
        end: end
    }
}

$('#writing').keydown(function(e) {
    if (e.keyCode == 9) {
      var caret = getCaretPosition(this);
      var word = /\S+$/.exec(this.value.slice(0, this.value.indexOf(' ',caret.end)));
      word = word ? word[0] : null;
      if (word.charAt(0) === '@') 
        //alert(userlist.filter((x) => x.indexOf(word.slice(1)) === 0));
        var stringParts = $(this).val().split('@');
        var nameToInsert = userlist.filter((x) => x.indexOf(word.slice(1)) === 0)[0];
        var completeString = stringParts[0] + '@' + nameToInsert;
        $(this).val(completeString);
      e.preventDefault();  
      return false;
    }

    });

#writing { width: 500px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<textarea id="writing">Hello @b what's up? hello @you as well... Type @b and then "TAB" key it should autocomplete usernames 
</textarea>

现在它完成了名称。但我会致力于改进预测名称的算法。