时间戳

首页 > 解决方案 > 防止 xmlhttp 函数在 keyup 上再次运行

javascript - 防止 xmlhttp 函数在 keyup 上再次运行

问题描述

所以我有一个 keyup 函数，它从 MySQL 表中检索数据，然后显示它。但是，如果更改了字母，它会再次检索数据。

请参阅下面的图片 它目前的情况和在检查器中

它应该做的只是用新建议替换这些建议，而不是将其添加到列表中

编辑：Shoaeb 的解决方案有效，但不是他建议的方式。 

document.getElementById('schoolListMenu').innerHTML="";

我在调用 keyup 函数后添加了该行。这将清除 div 中的内容，并在用户停止输入后将其替换为更新的内容。如果用户再次按下一个键，它将再次清除 div 并附加更新的结果。

edit2：更新的 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？我觉得我了解问题所在并且知道解决方案是什么，但我无法用言语表达

标签： javascriptphpmysqlajaxxmlhttprequest

解决方案

更改此行

document.getElementById('schoolListMenu').appendChild(schoolSuggestion);

至

document.getElementById('schoolListMenu').innerHTML(schoolSuggestion);

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

document.getElementById('schoolListMenu').innerHTML=""; document.getElementById('schoolListMenu').appendChild(schoolSuggestion);

推荐阅读