Создайте автозаполнение как обновление статуса Facebook

Question

Я пытаюсь создать div с contenteditable, как обновление статуса Facebook. Затем я хочу показать окно автозаполнения, когда пользователь написал @.

Как бы ты это сделал. В настоящее время я просто играю с нажатием клавиши и проверяю, если код клавиши = 64. Как-то это работает, но это не проверяет, есть ли пробел перед альфа, или если пользователь не сфокусировал поле, затем сфокусировал его снова.

Есть идеи? Или вы знаете о каком-либо плагине, который работает что-то подобное?

Tnx

Answer 1

Я бы, наверное, тоже сделал это с нажатием клавиши.

но нам нужно проверить позицию курсора, чтобы проверить символ перед'@'.

вот функция, которую я использовал с http://javascript.nwbox.com/cursor_position/cursor.js

function getSelectionStart(o) {
  if (o.createTextRange) {
    var r = document.selection.createRange().duplicate();
    r.moveEnd('character', o.value.length); 
    if (r.text == '') return o.value.length
      return o.value.lastIndexOf(r.text);
    } else { 
      return o.selectionStart;
    }
}

затем с помощью jquery я написал эту функцию обратного вызова при нажатии клавиши:

txt.keypress(function(event) {
    if (event.which == 64) {
        var index = getSelectionStart(this)
        var prevChar = txt.val().substring(index - 1, index);
        // now you can check if the previous char was a space
    }
});