Question

我正在使用Inputosaurus向我的客户管理系统中添加一些精美的自动完成标签。就化妆品和生产率而言，这是一个漂亮的系统。

问题在于加载时间过长。

HTML页面加载了几张图像（有时是几百张），每张图像都有自己的自动完成字词列表实例。最终的HTML文件中生成的JavaScript如下所示：

<script>
$('#tags_0001').inputosaurus({
    width : '100%',
    autoCompleteSource : ["A Midsummer Night's Dream","A Modest Proposal","A Particular Entertainment","A Tale of a Tub","A Yorkshire Tragedy","A.G. Werner","Abbasid","Abbe de la Roque","Abel Berland","Aborigines","Abou Mandour","Aboukir","Abraham Munting","Abraham van Diepenbeeck","Absalom and Achitophel","Abu Mandour","Abukir","Abyssinia Map","Academie Royale des Sciences","Accipies","Accounting","Achaean","Achitecture","Acts of Parliament","Admiral Mendoza portrait","Aegean Sea","Aeneid","Aeneis","Aesop","Aethiopia","Aetiis","Afghanistan"],
    activateFinalResult : true});
$('#tags_0002').inputosaurus({
    width : '100%',
    autoCompleteSource : ["A Midsummer Night's Dream","A Modest Proposal","A Particular Entertainment","A Tale of a Tub","A Yorkshire Tragedy","A.G. Werner","Abbasid","Abbe de la Roque","Abel Berland","Aborigines","Abou Mandour","Aboukir","Abraham Munting","Abraham van Diepenbeeck","Absalom and Achitophel","Abu Mandour","Abukir","Abyssinia Map","Academie Royale des Sciences","Accipies","Accounting","Achaean","Achitecture","Acts of Parliament","Admiral Mendoza portrait","Aegean Sea","Aeneid","Aeneis","Aesop","Aethiopia","Aetiis","Afghanistan"],
    activateFinalResult : true});
$('#tags_0003').inputosaurus({
    width : '100%',
    autoCompleteSource : ["A Midsummer Night's Dream","A Modest Proposal","A Particular Entertainment","A Tale of a Tub","A Yorkshire Tragedy","A.G. Werner","Abbasid","Abbe de la Roque","Abel Berland","Aborigines","Abou Mandour","Aboukir","Abraham Munting","Abraham van Diepenbeeck","Absalom and Achitophel","Abu Mandour","Abukir","Abyssinia Map","Academie Royale des Sciences","Accipies","Accounting","Achaean","Achitecture","Acts of Parliament","Admiral Mendoza portrait","Aegean Sea","Aeneid","Aeneis","Aesop","Aethiopia","Aetiis","Afghanistan"],
    activateFinalResult : true});
</script>

现在考虑此示例截断“ autoCompleteSource”列表。实际上，它持续进行1000多个术语（每个实例），产生的HTML字符数超过19-20百万！

对于jQuery来说，引用这些术语（或变量字符串）的数组似乎是一种理想的情况，但是我真的不确定HTML是否支持这一点。

我很惊讶没有在网上看到太多有关此的信息。我希望这仅仅是我缺乏针对不良搜索的JS词典，而不是根本没有解决办法。

我确定这里的其他人以前曾遇到过这种情况-在这种情况下我应该使用哪种替代方法？

如果我遗漏了任何重要的诊断信息，请告诉我。

提前谢谢您。

Answer 1

用户将输入一个单词，并在实际输入任何内容过大之前向客户发送数千个可能的单词。相反，您应该等待用户输入前几个字符，然后将其发送到服务器，查询和过滤所有可能的术语，然后仅将匹配的那些术语发送回去，然后将该小列表发送回客户端，然后根据其再次过滤用户已输入的其他字符。

Google单词：AJAX和fetch()。

Answer 2

虽然我认为Jonas的回答优于这个答案，但我想发布一种替代解决方案，我发现它对另一个应用程序不可行的项目非常有帮助。

来源是此SO问题的公认答案：

how to hide all divs in jquery

相反，它专注于textarea元素，而不是div，但是应用程序相同。我们正在关注的是textarea。

将替换我原始问题中的代码的新代码是：

<script>
$('textarea[id^=\"tags_\"]').inputosaurus({
    width : '100%',
    autoCompleteSource : ["A Midsummer Night's Dream","A Modest Proposal","A Particular Entertainment","A Tale of a Tub","A Yorkshire Tragedy","A.G. Werner","Abbasid","Abbe de la Roque","Abel Berland","Aborigines","Abou Mandour","Aboukir","Abraham Munting","Abraham van Diepenbeeck","Absalom and Achitophel","Abu Mandour","Abukir","Abyssinia Map","Academie Royale des Sciences","Accipies","Accounting","Achaean","Achitecture","Acts of Parliament","Admiral Mendoza portrait","Aegean Sea","Aeneid","Aeneis","Aesop","Aethiopia","Aetiis","Afghanistan"],
    activateFinalResult : true});
</script>

就是这样。只需一行。经过测试并可以正常工作。

Inputosaurus / jQuery加载时间

2 个答案: