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];

为我解决了这个问题。

顺便说一句 - 有更高效的方法来实现自动完成。仅通过一种方式查看“自动完成树”。