Autocomplete 获取文本区域中的光标位置

我正在尝试在文本区域中实现自动完成（类似于）

我试图做的是，当用户输入一组特定的字符（比如insert:）时，他们将得到一个充满AJAX的div，其中可能包含可选择的匹配项

在常规文本框中，这当然很简单，但在文本区域中，我需要能够根据光标在屏幕上的正确位置弹出div

有人能提供方向吗

谢谢，

---

-M

您可以使用document.selection.createRange（）获取插入符号，然后检查它以显示所需的所有信息（例如位置）。有关更多详细信息，请参阅。

函数getCursor（nBox）{
    function getCursor(nBox){
    var cursorPos = 0;
    if (document.selection){ 
        nBox.focus();
        var tmpRange = document.selection.createRange();
        tmpRange.moveStart('character',-nBox.value.length);
        cursorPos = tmpRange.text.length;
    }
    else{
        if (nBox.selectionStart || nBox.selectionStart == '0'){
            cursorPos = nBox.selectionStart;
        }
    }

    return cursorPos;
}

function detectLine(nBox,lines){
    var cursorPos = getCursor(nBox);
    var z = 0; //Sum of characters in lines
    var lineNumber = 1;
    for (var i=1; i<=lines.length; i++){
        z = sumLines(i)+i; // +i because cursorPos is taking in account endcharacters of each line.
        if (z >= cursorPos){
            lineNumber = i;
            break;
        }
    }

    return lineNumber;

    function sumLines(arrayLevel){
        sumLine = 0;
        for (var k=0; k<arrayLevel; k++){
            sumLine += lines[k].length;
        }
        return sumLine;
    }
}



function detectWord(lineString, area, currentLine, linijeKoda){
    function sumWords(arrayLevel){
        var sumLine = 0;
        for (var k=0; k<arrayLevel; k++){
            sumLine += words[k].length;
        }       
        return sumLine;
    }


    var cursorPos = getCursor(area);
    var sumOfPrevChars =0;
    for (var i=1; i<currentLine; i++){
        sumOfPrevChars += linijeKoda[i].length;
    }

    var cursorLinePos = cursorPos - sumOfPrevChars;

    var words = lineString.split(" ");
    var word;
    var y = 0;


    for(var i=1; i<=words.length; i++){
        y = sumWords(i) + i;
        if(y >= cursorLinePos){
            word = i;
            break;
        }
    }

    return word;
}

var area = document.getElementById("area");
var linijeKoda = area.value.split("\n");
var currentLine = detectLine(area,linijeKoda);
var lineString = linijeKoda[currentLine-1];
var activeWord = detectWord(lineString, area, currentLine, linijeKoda);
var words = lineString.split(" ");
if(words.length > 1){
  var possibleString = words[activeWord-1];
}
else{
  var possibleString = words[0];
}

var cursorPos=0；
if（document.selection）{
nBox.focus（）；
var tmpRange=document.selection.createRange（）；
tmpRange.moveStart（'character'，-nBox.value.length）；
cursorPos=tmpRange.text.length；
}
否则{
如果（nBox.selectionStart | | nBox.selectionStart=='0'）{
cursorPos=nBox.selectionStart；
}
}
返回游标；
}
功能检测线（nBox，线）{
var cursorPos=getCursor（nBox）；
var z=0；//行中字符的总和
变量lineNumber=1；
对于（变量i=1；i=cursorPos）{
行号=i；
打破
}
}
返回行号；
函数sumLines（arrayLevel）{
sumLine=0；
对于（var k=0；k一个丑陋的解决方案：

对于ie：使用文档。选择

对于ff：使用pre-behind-textarea，将光标前的文本粘贴到其中，在其后放置一个标记html元素（cursorPos），并通过该标记元素获取光标位置

注意：|代码很难看，很抱歉| pre和textarea字体必须相同|不透明度用于可视化|没有自动完成功能，只有div后面的光标（当您在textarea中键入时）（根据需要修改）


预科学生颜色{
位置：绝对位置；
保证金：0；
填充：0；
边框：1px纯蓝色；
z指数：2；
}
textarea.studentCode{
位置：相对位置；
保证金：0；
填充：0；
边框：1px纯银；
z指数：3；
溢出：可见；
不透明度：0.5；
过滤器：α（不透明度=50）；
}
你好，世界

你好吗

自动完成内容
var myTextarea=document.getElementById（'myTextarea'）；
var preBehindMyTextarea=document.getElementById（'preBehindMyTextarea'）；
var autoCompleteSelector=document.getElementById（'autoCompleteSelector'）；
函数ieTaKeyUp（）{
var r=document.selection.createRange（）；
autoCompleteSelector.style.top=r.offsetTop；
autoCompleteSelector.style.left=r.offsetLeft；
}
函数taKeyUp（）{
taSelectionStart=myTextarea.selectionStart；
preBehindMyTextarea.innerHTML=myTextarea.value.substr（0，taSelectionStart）+''；
cp=document.getElementById（'cursorPos'）；
leftTop=findPos（cp）；
autoCompleteSelector.style.top=leftTop[1]；
autoCompleteSelector.style.left=leftTop[0]；
}
功能findPos（obj）{
var curleft=curtop=0；
if（对象抵销父对象）{
做{
curleft+=obj.offsetLeft；
curtop+=对象偏移量；
}而（对象=对象抵销母公司）；
}
返回[curleft，curtop]；
}
//myTextarea.selectionStart
在文本区域中实现自动完成并不是那么容易。我实现了一个jquery插件来实现这一点，我必须创建一个texarea的克隆，以猜测光标在textarea中的位置。
这很有效，但并不完美

您可以在这里查看：

我希望有帮助

<html>
<style>
pre.studentCodeColor{
    position:absolute;
    margin:0;
    padding:0;
    border:1px solid blue;
    z-index:2;
}
textarea.studentCode{
    position:relative;
    margin:0;   
    padding:0;
    border:1px solid silver;    
    z-index:3;
    overflow:visible;
    opacity:0.5;
    filter:alpha(opacity=50);
}
</style>

hello world<br/>
how are you<br/>
<pre class="studentCodeColor" id="preBehindMyTextarea">
</pre>
<textarea id="myTextarea" class="studentCode" cols="100" rows="30" onkeyup="document.selection?ieTaKeyUp():taKeyUp();">
</textarea>

<div 
    style="width:100px;height:60px;position:absolute;border:1px solid red;background-color:yellow"
    id="autoCompleteSelector">  
autocomplete contents
</div>

<script>
var myTextarea = document.getElementById('myTextarea');
var preBehindMyTextarea = document.getElementById('preBehindMyTextarea');
var autoCompleteSelector = document.getElementById('autoCompleteSelector');

function ieTaKeyUp(){
    var r = document.selection.createRange();
    autoCompleteSelector.style.top = r.offsetTop;
    autoCompleteSelector.style.left = r.offsetLeft;
}
function taKeyUp(){
    taSelectionStart = myTextarea.selectionStart;   
    preBehindMyTextarea.innerHTML = myTextarea.value.substr(0,taSelectionStart)+'<span id="cursorPos">';
    cp = document.getElementById('cursorPos');
    leftTop = findPos(cp);

    autoCompleteSelector.style.top = leftTop[1];
    autoCompleteSelector.style.left = leftTop[0];
}
function findPos(obj) {
    var curleft = curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }
    return [curleft,curtop];
}
//myTextarea.selectionStart 
</script>
</html>