javascript - 如何收集div中#或@旁边键入的字符/单词

Question

我有一个 div，其 contenteditable 属性设置为 true。当用户键入 '#' 或 '@' 时，我想获取他/她键入的任何内容，直到按下空格键。这样，我就可以根据他/她可能输入的单词从数据库中获取建议。
请看下面的例子，

<div id="editableDiv" contenteditable="true">
    I may tweet from @twitter in the near #future
    <ul id="suggestUL"></ul>
</div>

一旦用户键入'@' 或'#'，我必须能够收集他/她可能键入的任何内容(根据上面的示例，在 < em>@ t, tw, twi, twit, twitt >、twitte 和 twitter。在 # f 之后，fu... future )。在 'twitter' 之后，用户键入 spacebar 因此，单词收集必须停止并且必须再次从 # 开始。

已编辑
获取可以显示建议列表的像素的代码

function getCaretPixelPos($node) {
    var offsetx = 0;
    var offsety = 0;

    var nodeLeft = 0,
    nodeTop = 0;
    if ($node) {
        nodeLeft = $node.offsetLeft;
        nodeTop = $node.offsetTop;
    }

    var pos = { left: 0, top: 0 };

    if (document.selection) {
        var range = document.selection.createRange();
        pos.left = range.offsetLeft + offsetx - nodeLeft + 'px';
        pos.top = range.offsetTop + offsety - nodeTop + 'px';
    } else if (window.getSelection) {
        var sel = window.getSelection();
        var range = sel.getRangeAt(0).cloneRange();
        try {
            range.setStart(range.startContainer, range.startOffset - 1);
        } catch (e) { }
        var rect = range.getBoundingClientRect();
        if (range.endOffset == 0 || range.toString() === '') {
            // first char of line
            if (range.startContainer == $node) {
                // empty div
                if (range.endOffset == 0) {
                    pos.top = '0px';
                    pos.left = '0px';
                } else {
                    // firefox need this
                    var range2 = range.cloneRange();
                    range2.setStart(range2.startContainer, 0);
                    var rect2 = range2.getBoundingClientRect();
                    pos.left = rect2.left + offsetx - nodeLeft + 'px';
                    pos.top = rect2.top + rect2.height + offsety - nodeTop + 'px';
                }
            } else {
                pos.top = range.startContainer.offsetTop + 'px';
                pos.left = range.startContainer.offsetLeft + 'px';
            }
        } else {
            pos.left = rect.left + rect.width + offsetx - nodeLeft + 'px';
            pos.top = rect.top + offsety - nodeTop + 'px';
        }
    }
    //console.log('pos left : ' + pos.left + ' pos top : ' + pos.top);
    //console.log($('#suggestUL'));
    $('#suggestUL').css('left', pos.left);
    $('#suggestUL').css('top', pos.top);
    //console.log('suggestUL left : ' + $('#suggestUL').css('left') + ' suggestUL top : ' + $('#suggestUL').css('top'));
};

这就是我调用上面函数的方式

var event = e || window.event;
    var keyCode = event.keyCode || event.which;
    if (keyCode == 35 || keyCode == 64)
        getCaretPixelPos($('#editableDiv')[0]);

PS:不知道为什么我的Title一直被罚-2 reputation。无论如何，为了更清楚起见，我编辑了标题。我是一名学习者，如果我在选择标题或提出问题时有任何错误，请提出建议。
提前致谢。

Answer 1

您可以使用以下脚本，与此同时，您需要使用一些 UL/LI 元素组合，一旦从服务器获取数据，它们将每行显示一个建议。您可以使用 jQuery Ajax 从服务器获取数据并动态创建 ul/li 列表。

    var fetchData = false;
    var suggestionChar = '';
    $('#editableDiv').on('keypress',function(event){
         var keyCode = event.which || event.keyCode.
         var hashKey; // Set keyCode for #
         var atKey; // Set keycode for @
         var spaceKey //SpaceKey code
        if(keyCode == hashKey || keyCode == atKey){
            fetchData = true
            suggestionChar = '';
            return; //flag is set now look out for next key cod.
        }
       else if ( keyCode == spaceKey ){
           fetchData = false;
           suggestionChar = '';
        }
       if( fetchData){
           var data = String.fromCharCode(keyCode);
           suggestionChar = suggestionChar + data;
           // use "suggestionChar" for fetching the data from server.
           // fetch suggestions  from Server.
           // On success call back create the dynamic list of ul/li which will show the suggestion to user. You need to bind the user click event and/or keypress event for ul/li so that user can select the suggestion using mouse and keyboard along with 'Space' key.
        }
    })