如何过滤具有2万个元素的数组中的自动完成数据？

我建议按字母顺序将它们分成不同的部分，如下所示：

let data={
    "a":[
            "aabc",
            "abcd",
            "accdsd",
            "apple",
            "azsdfsdf"
    ],
    "b":[
            "ba",
            "bc",
            "bddkjfn"
    ]
}

之后，使用搜索键中的第一个字母从对象访问数组中的一个，其中数据从a拆分

let writtenText="apple"; // search key

sozler[writtenText[0]].forEach(word=>{
    if(word.startWith(writtenText))
    {
        commonWords.innerHTML += '<li>' + word + '</li>';
    }
});

通过这种方法，您将数据划分为26个部分（az），并且当您从数据中选择任何数组时，元素的数量将大大少于原始元素，并且会更快。

如果您不知道如何将数组转换为我所示的数据格式，请使用此功能

function convertData(data)
{
    let result={};
    "abcdefghijklmnopqrstuvwxyz".split("").forEach(key=>{
        result[key]=[];
    });
    data.forEach(word=>{
        result[word[0]].push(word);
    });
    return result;
}

将结果存储在json文件中，或者根据您的喜好保存并记住convertData()供一次使用，执行后，将数据保存为某种形式以备后用。

如果您需要在html呈现方面更好的性能，请替换

commonWords.innerHTML += '<li>' + word + '</li>';

与

let li=document.createElement("li");
li.innerHTML=word;
commonWords.appendChild(li);

第二行中的行数更多，但在html中添加大量节点时，它的性能很好。本文很好地解释了innerHTML与createElement，使用innerHTML+=将使浏览器重新呈现其他同级元素，但是在appendChild()没有。