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 = ...to注释底部代码list.innerHTML = '<li>'+...并尝试键入b，然后是ba，然后是bar，然后是barz 时，我在控制台中看到了正确的结果。但是如果我不注释底部代码，我会收到undefined一半的时间并且列表也有一半的时间是隐藏的。

如何解决问题？

Answer 1

您会看到这种奇怪的行为，因为您<ul>动态更新的标签嵌套在div接收输入以提供列表内容的同一个标签中。在动态修改 div 包含的列表后，考虑this.innerTextdivkeyup侦听器上的值是什么。尝试console.log(textWords)在 keyUp 侦听器的顶部查看。只需将您的 div 改为：<div contenteditable="true"></div><ul></ul>并将代码段末尾附近的侦听器更改为var list = document.getElementsByTagName('ul')[0];为我解决了这个问题。顺便说一句 - 有更高效的方法来实现自动完成。仅通过一种方式查看“自动完成树”。