Autocomplete usernames when TAB is pressed

Question

I'm working on a "autocomplete usernames when TAB is pressed" feature.

I've been able to detect @ and to search in a username list.

How to perform the autocompletion now, with a different matching username each time we press 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

Here is the solution for your issue:

I used .on() to bind keydown to textbox, rather than keypress.

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>

Now it completes the name. But I would work on improving on the algorithm predicting the name.