防止 xmlhttp 函数在键控时再次运行

Question

因此，我有一个键控函数，可以从MySQL表中检索数据，然后显示它。但是，如果更改了字母，它将再次检索数据。请参阅下图“当前状态”和“在检查器中”它应该做的只是用新的建议替换这些建议，而不是将其添加到列表中编辑：Shoaeb的解决方案有效，但不是他建议的方式。document.getElementById('schoolListMenu').innerHTML="";我在调用键控函数后立即添加了该行。这将清除 div 中的内容，并在用户停止键入后将其替换为更新的内容。如果用户再次按某个键，它将再次清除 div 并附加更新的结果。编辑2：更新了JS代码var timeout = null;function getSchool(schoolType){    if(schoolType1.classList.contains('active') || schoolType2.classList.contains('active'))    {        schoolNameField.onkeyup = function(e)        {            document.getElementById('schoolListMenu').innerHTML="";            clearTimeout(timeout);            timeout = setTimeout(function() {                var query = e.target.value;                console.log(query);                var xmlhttp = new XMLHttpRequest();                xmlhttp.onreadystatechange = function() {                    if (this.readyState === 4 && this.status === 200) {                        var schoolResult = this.responseText;                        schoolResult = schoolResult.split("|");                        for(var i = 0; i < schoolResult.length; i++)                        {                            var schoolSuggestion = document.createElement('div');                            schoolSuggestion.id = 'schoolSuggestion'+i;                            schoolSuggestion.className = 'item';                            schoolSuggestion.innerText = schoolResult[i];                            document.getElementById('schoolListMenu').appendChild(schoolSuggestion);                        }                    }                };                xmlhttp.open("GET", "scripts/schoolLookup.php?type="+schoolType+"&name="+query, true);                xmlhttp.send();            }, 500);        };    }}我如何让它替换内容而不是添加新的div？我觉得我了解问题是什么，知道解决方案是什么，但我无法用言语表达

Answer 1

更改此行

文档.getElementById（“学校列表菜单”）.appendChild（学校建议）;

自

document.getElementById（'学校列表菜单'）.innerHTML（学校建议）;

或者您可以在附加之前清除列表

document.getElementById（'学校列表菜单'）.innerHTML=“”;文档.getElementById（“学校列表菜单”）.appendChild（学校建议）;