防止 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（学校建议）;