Javascript自动完成停止循环

Question

我正在尝试构建一个简单的自动完成功能，但我遇到了以下脚本的问题

<input type="text" name="search" id="searchField" placeholder="search for something" />
<div class="results-list">
    <ul id="searchResults"></ul>
</div>


<script>
var users = JSON.parse('{{ $accounts }}'); // json data from php script

// add event listener
Event.add('searchField', 'keyup', function(){
    if(document.getElementById('searchField').value.length > 1) {
        processSearch(users, 'searchField', 'searchResults');
    }
    else {
        document.getElementById('searchResults').innerHTML = '';
    }
});

function processSearch(data, field, result) {
    if(document.getElementById(field).value.length == 0) {
        document.getElementById(result).innerHTML = '';
    }
    else {
        for (var k in data) {
            if(data.hasOwnProperty(k)) {
                if(data[k].indexOf(document.getElementById(field).value) != -1) {
                    var list = document.createElement('li');
                    list.innerHTML = data[k];
                    document.getElementById(result).appendChild(list);
                }
            }
        }
    }
}
</script>

现在我得到了正确的结果，但如果我继续写，结果会被重现，我最终会得到很多重复的结果，如下图所示

当我删除时，结果仍然重复，除非字段的长度小于 1 并且所有结果都被删除。谁能告诉我如何停止获取重复项？

Answer 1

问题在于，由于 processSearch() 在每次击键时都会被调用，而且您总是将结果附加到之前的结果中。您需要在开始回调中删除之前的结果，即遍历结果元素的所有子元素并使用 removeChild() 删除它们。然后您可以添加新结果。