Question

我有以下代码来显示带有自动填充单词的列表：

var words = ['foo', 'bar', 'barz', 'ba'];
var possibleWords = [];
  
document.getElementsByTagName('div')[0].addEventListener('keyup', function(){
      
  var textWords = this.innerText.split(' ');
  var lastWord = textWords[textWords.length-1];
  for(var k = 0; k < words.length; k++){
      
    for(n = 0; n < 20; n++){
          
      if(lastWord.length == n+1 && words[k].charAt(n) == lastWord.charAt(n)){
        possibleWords.push(words[k]);
            
        var counts = possibleWords.reduce((a, c) => {
          a[c] = (a[c] || 0) + 1;
          return a;
        }, {});
        var maxCount = Math.max(...Object.values(counts));
        var mostFrequent = Object.keys(counts).filter(k => counts[k] === maxCount);
      }
    }
  }
      
  console.log(mostFrequent);
      
  var list = this.getElementsByTagName('ul')[0];
  if(mostFrequent == undefined) {
    list.removeAttribute('style');
  } else {
      
    list.style.display = 'inline';
    list.innerHTML = '';
    list.innerHTML = '<li>'+mostFrequent.join('</li><li>')+'</li>';
  }
});

div{
width:300px;
height:100px;
outline:1px solid #ccc;
position:relative;
}
ul{
display:none;
position:absolute;
left:0;
top:100px;
}

<div contenteditable="true"><ul></ul></div>

当我将底部代码从var list = ...注释为list.innerHTML = '<li>'+...并尝试依次输入 b ， ba 和 bar < / strong>，然后 barz ，我会在控制台中看到正确的结果。但是，如果我不注释底部的代码，则会有一半的时间收到undefined，并且有一半的时间也隐藏了该列表。

如何解决该问题？

Answer 1

您看到的是这种奇怪的行为，因为您动态更新的<ul>标签嵌套在同一div中，该标签接收输入以馈送列表内容。动态修改div包含的列表后，请考虑div this.innerText侦听器上keyup的值是什么。

尝试在keyUp侦听器顶部的console.log(textWords)上查看。

只需将div改为：

<div contenteditable="true"></div><ul></ul>

并将代码段末尾的侦听器更改为

var list = document.getElementsByTagName('ul')[0];

为我解决了这个问题。

顺便说一句-实现自动完成功能的性能更高。只需一种方法即可查看“自动完成尝试”。

JS数组中出现最多的元素的问题

1 个答案: