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

游戏中的玩家

(我的代码全部关于HTML和Javascript)我有一个包含2万个元素的数组。并且我想自动完成一个搜索框(带有onchange事件)。我正在使用这段代码

if(sozler[i].startsWith(writtenText)) {
    commonWords.innerHTML += '<li>' + sozler[i] + '</li>';
}

但是要花很多时间 有没有最佳版本?

27像素

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

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()没有。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

呈现jQuery自动完成数据中存在的html元素

过滤自动完成数据源

具有2个参数的数组,用于自动完成jQuery

输入中的自动完成数据

创建具有300万个元素的双数组

如何使用 Ajax 和 Laravel 将自动完成数据提取到他们受尊重的元素中?

如何生成数组中两个元素的所有排列?

如何创建一个过滤器来格式化生成数组中每个元素的 HTML 标签?

如何删除具有2个常见元素的数组/结构列表中的元素

如何在具有 2 个条件的 reactJS 中过滤数组

jQuery自动完成数据

在R中,如何过滤数据框以仅包括具有> = 2个非NA值的行?

如何使PhpStorm建议/自动完成数组键

使用select2:opening调用中的值作为ajax自动完成数据参数的输入

如何在组件中绑定角材料自动完成数据

如何获取正确格式的自动完成数据

如何填充materialize.css芯片自动完成数据?

如何使用缺少的(连续的)元素来完成数组 Javascript?

如何过滤具有嵌套数组的元素的数组?

Golang如何保证被另一个Goroutine访问时在Goroutine中完成数据

如何使用python从1d数组中创建具有3个元素的2d数组

JS:如何过滤对象数组,向第一个对象添加具有其余过滤元素值的键?

jQuery自动完成如何过滤响应数据

从具有第二个数组的元素的数组中获取数据

如何使用jq过滤具有混合类型元素的数组

如何查找/过滤具有最小正差的数组元素

清除自动完成数据jQuery

我如何在Perl中完成数组部分

具有4000万个值的自动建议