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

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，然后 barz 我在控制台中看到了正确的结果。但如果我不评论底部代码，我会收到 undefined一半的时间，列表也有一半的时间被隐藏。

如何解决这个问题？

Answer 1

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

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

只需将您的 div 改为这样即可:

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

并将片段末尾附近的监听器更改为

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

帮我解决了这个问题。

顺便说一句——还有更高效的方法来实现自动完成。研究“自动完成特里”只是一种方法。