ibeautiful
2021-06-21 09:15:11
我有以下代碼來顯示帶有用于自動(dòng)完成的單詞的列表: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>當(dāng)我從var list = ...to注釋底部代碼list.innerHTML = '<li>'+...并嘗試鍵入b,然后是ba,然后是bar,然后是barz 時(shí),我在控制臺(tái)中看到了正確的結(jié)果。但是如果我不注釋底部代碼,我會(huì)收到undefined一半的時(shí)間并且列表也有一半的時(shí)間是隱藏的。如何解決問題?
1 回答

躍然一笑
TA貢獻(xiàn)1826條經(jīng)驗(yàn) 獲得超6個(gè)贊
您會(huì)看到這種奇怪的行為,因?yàn)槟?code><ul>動(dòng)態(tài)更新的標(biāo)簽嵌套在div
接收輸入以提供列表內(nèi)容的同一個(gè)標(biāo)簽中。在動(dòng)態(tài)修改 div 包含的列表后,考慮this.innerText
divkeyup
偵聽器上的值是什么。
嘗試console.log(textWords)
在 keyUp 偵聽器的頂部查看。
只需將您的 div 改為:
<div contenteditable="true"></div><ul></ul>
并將代碼段末尾附近的偵聽器更改為
var list = document.getElementsByTagName('ul')[0];
為我解決了這個(gè)問題。
順便說一句 - 有更高效的方法來實(shí)現(xiàn)自動(dòng)完成。僅通過一種方式查看“自動(dòng)完成樹”。
添加回答
舉報(bào)
0/150
提交
取消