不带下拉菜单的 <p> 标记的自动完成建议

Question

我正在尝试对可内容编辑的段落标签进行自动完成（不带下拉菜单）。如何在用户输入时使用 javascript/jQuery 在 contenteditable p 标签中选择剩余的建议字母？

// On typing
$(document).on('input', '.cell-input', function(e) {
    var userInput = e.target.innerText;

    // Suggested 'Bond' to user, because user typed (assumption) 'B'
    e.target.innerText = 'Bond';

    // Select
    $(e.target).selectText(1, 3);
});

// To select
jQuery.fn.selectText = function(startPos, endPos){
    var doc = document;
    var element = this[0];

    if (doc.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    }
    else if (window.getSelection) {
        var selection = window.getSelection();        
        var range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
};

全选工作正常。然后我尝试添加：

selection.moveEnd("character", endPos);
selection.moveStart("character", startPos);

或

range.moveEnd("character", endPos);
range.moveStart("character", startPos);

.. 但没有运气。我在正确的方向吗？请指教。

Answer 1

使用setStart() 和setEnd()

$(document).on('input', '.cell-input', function(e) {
  var userInput = e.target.innerText;

  // Suggested 'Bond' to user, because user typed (assumption) 'B'
  e.target.innerText = 'Bond';

  // Select
  $(e.target).selectText(1, 4);
});

// To select
jQuery.fn.selectText = function(startPos, endPos) {
  var doc = document;
  var element = this[0];

  if (doc.body.createTextRange) {
    var range = document.body.createTextRange();
    range.moveToElementText(element);
    range.select();
  } else if (window.getSelection) {
    var selection = window.getSelection();
    var range = document.createRange();
    range.setStart(element.firstChild, startPos);
    range.setEnd(element.firstChild, endPos);
    selection.removeAllRanges();
    selection.addRange(range);
  }
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p class="cell-input" contenteditable="true">B</p>

注意：使用element.firstChild 可能不适用于 HTML 子节点