Question

我有一个contenteditable div，我只想从中检测当前键入的主题标签，以便可以相应地从数据库发送建议。我用两种方法尝试过。（两者都有jsfiddles演示）

第一个是通过正则表达式获取所有主题标签，然后通过数据库中的每个主题标签循环（因为我不知道如何检测当前键入的主题标签）。这是很差的性能，因为对于所有其他哈希（不是要在其上使用的哈希）来说，在数据库中循环，可能包含一些建议。



     for(var k=0; k < MatchingInput.length; k++)
{
let SuggestionsPerTag = 5;
  for (var i=0; i<valuesDB.length; i++)
  {
  let InputMatchReg = RegExp(MatchingInput[k].slice( 1 ));// slice #
  if(InputMatchReg.test(valuesDB[i].key)    
     && SuggestionsPerTag != 0   
         && InputMatchReg.source.length > 1) // there have to be two letters after # 
     {
      console.log("MatchingInput with DB: "+valuesDB[i].key);
      if(!valuesBrowser.filter(item => item.key === valuesDB[i].key).length)
      {
      valuesBrowser.push({key: valuesDB[i].key})
      SuggestionsPerTag--
      }
     }
  }
}

for(var k=0; k < MatchingInput.length; k++) { let SuggestionsPerTag = 5; for (var i=0; i<valuesDB.length; i++) { let InputMatchReg = RegExp(MatchingInput[k].slice( 1 ));// slice # if(InputMatchReg.test(valuesDB[i].key) && SuggestionsPerTag != 0 && InputMatchReg.source.length > 1) // there have to be two letters after # { console.log("MatchingInput with DB: "+valuesDB[i].key); if(!valuesBrowser.filter(item => item.key === valuesDB[i].key).length) { valuesBrowser.push({key: valuesDB[i].key}) SuggestionsPerTag-- } } } }

https://jsfiddle.net/apbln/ep5chj0y/127/

第二个是寻找要键入的哈希，然后寻找进一步的输入并获取字符串。这种方法非常容易出错，因为我需要查找退格，空格，单击字段的另一部分，然后用户在其中写东西，粘贴文本，删除按钮，crtl + x ...

browserInputDiv.addEventListener("keypress", function AfterHash(event) { 
if(event.keyCode == 35) // first hash
trigger = true;
if(event.keyCode == 32)// space
{ 
trigger = false;
console.log("trigger false")
typedtext = ""
}
if(trigger == true)
{console.log("trigger true")
if(event.keyCode == 8) // not working
{
console.log("backspace")
}
typedtext = typedtext + String.fromCharCode(event.keyCode)
 console.log(typedtext)
 hashLength++;
 console.log(hashLength)
 };
});
browserInputDiv.addEventListener("click", function clickedwhiletyping() { 
trigger = false;
});

https://jsfiddle.net/apbln/250wjfxo/11/

仅获取当前键入的主题标签

0 个答案: