有没有办法限制我的实时 JavaScript 搜索栏中的长搜索结果列表，以便它在桌面浏览器上响应更快？

Question

我有一个 javascript 实时搜索栏，它读取保存记录的 .js 文件。我在原始记录中添加了大约 20,000 条记录，并为这些记录添加了等量的相应链接。在我的移动设备上，速度很快，运行完美，没有任何问题。为什么？在桌面上，它会大大降低浏览器的速度；可能长达：第一次击键后 15 秒。我一直在寻找一种方法，将每次击键返回的搜索结果限制为 25 个左右，而不是包含所有结果的巨大列表。我的想法是，这么长的列表的html渲染是我桌面上的瓶颈；但我真的不知道。到目前为止我只使用 Firefox 进行桌面测试。提前感谢大家提供任何可能需要找到解决方案的想法。

我不是编码专家，我对基本 Javascript 的经验有限，并且到处搜索，发现了一些我尝试过但无济于事的技巧...

删除并替换此行：

对于 (i = 0; i < listItems.length; i++)

对于 (i = 0; i < 25; i++) ---- didn't work, was expecting the entire list to still be searched, but the displayed results would be limited to 25. It would only search the first 25 lines in the file.

添加了这个：

let list = document.getElementById('list').max = "25"; ---- 不起作用，必须删除，因为之后搜索根本不起作用。

这是我的 .js 文件中的代码；产品和链接减少到各 17 个。

function search() {

let listContainer = document.getElementById('list');
let listItems = document.getElementsByClassName('listItem');
let input = document.getElementById('searchbar').value
input = input.toLowerCase();
let noResults = true;
for (i = 0; i < listItems.length; i++) { 
    if (!listItems[i].innerHTML.toLowerCase().includes(input) || input === "") {
        listItems[i].style.display="none";
        continue;
    }
    else {
        listItems[i].style.display="flex";
        noResults = false; 
    }

listContainer.style.display = noResults ? "none" : "block";

}

}

function loadSearchData() {
  // Data to be used in the searchbar
let parts = [
    '102-305 Air Filter for Kohler 25 083 01-S',
    '120-485 Oil Filter for Briggs & Stratton 492932S',
    '100-780 Inner Air Filter for Kohler 25 083 04-S',
    '120-380 Transmission Filter for Exmark 1-513211',
    '120-712 Fuel Filter for John Deere AT17387',
    '102-604 Air Filter for John Deere AT171853',
    '102-600 Air Filter for John Deere AT20728',
    '102-077 Inner Air Filter for Toro 108-3816',
    '102-608 Inner Air Filter for John Deere AT171854',
    '102-073 Air Filter for Toro 108-3814',
    '435-221 Electric Starter for Kubota 1G772-63010',
    '120-764 Oil Filter for Bobcat 6511730',
    '079-2657 20" Laminate Sprocket Nose Bar .325 pitch .050 gauge 78 DL',
    '435-954 Alternator for John Deere SE501843',
    '075-1847 18" Replaceable Sprocket Nose Bar .325 pitch .058 gauge 72 DL',
    '075-4377 16" Replaceable Sprocket Nose Bar .325 pitch .050 gauge 66 DL',
    '435-922 Electric Starter for John Deere TY6615'


  ];

let links = [
    '/102-305/',
    '/120-485/',
    '/100-780/',
    '/120-380/',
    '/120-712/',
    '/102-604/',
    '/102-600/',
    '/102-077/',
    '/102-608/',
    '/102-073/',
    '/435-221/',
    '/120-764/',
    '/079-2657/',
    '/435-954/',
    '/075-1847/',
    '/075-4377/',
    '/435-922/'


  ];

// Get the HTML element of the list
let list = document.getElementById('list');
// Add each data item as an <a> tag
    parts.forEach((country, index)=>{
    const link = links[index];
    let a = document.createElement("a");
    a.innerText = country;
    a.href = `stens${link}`;
    a.classList.add("listItem");
    list.appendChild(a);
})


}

Answer 1

你实际上不需要第一次渲染所有数据，只需过滤掉有用的数据，然后使用innerHTML而不是appendChild一次性渲染它们。

<style>
  .listItem {
    display: block;
  }
</style>
<input id="searchbar" type="text">
<button onclick="search()">search</button>
<div id="list"></div>

<script>
  function search() {
    let listContainer = document.getElementById('list');
    let input = document.getElementById('searchbar').value;
    let listItem = ''
    if (input) {
      input = input.toLowerCase();
      let num = 0;
      parts.find((country, index) => {
        if (country.toLowerCase().includes(input)) {
          const link = links[index];
          listItem += `<a class="listItem" href="stens${link}">${country}</a>`
          num++;
        }
        //limit 25 stop the Loop 
        return num === 25
      })
    }
    if (!listItem) listItem = 'noResults !';
   // render all listItem at once
    listContainer.innerHTML = listItem;
  }
  // Data to be used in the searchbar
  let parts = [
    '102-305 Air Filter for Kohler 25 083 01-S',
    '120-485 Oil Filter for Briggs & Stratton 492932S',
    '100-780 Inner Air Filter for Kohler 25 083 04-S',
    '120-380 Transmission Filter for Exmark 1-513211',
    '120-712 Fuel Filter for John Deere AT17387',
    '102-604 Air Filter for John Deere AT171853',
    '102-600 Air Filter for John Deere AT20728',
    '102-077 Inner Air Filter for Toro 108-3816',
    '102-608 Inner Air Filter for John Deere AT171854',
    '102-073 Air Filter for Toro 108-3814',
    '435-221 Electric Starter for Kubota 1G772-63010',
    '120-764 Oil Filter for Bobcat 6511730',
    '079-2657 20" Laminate Sprocket Nose Bar .325 pitch .050 gauge 78 DL',
    '435-954 Alternator for John Deere SE501843',
    '075-1847 18" Replaceable Sprocket Nose Bar .325 pitch .058 gauge 72 DL',
    '075-4377 16" Replaceable Sprocket Nose Bar .325 pitch .050 gauge 66 DL',
    '435-922 Electric Starter for John Deere TY6615'
  ];
  let links = [
    '/102-305/',
    '/120-485/',
    '/100-780/',
    '/120-380/',
    '/120-712/',
    '/102-604/',
    '/102-600/',
    '/102-077/',
    '/102-608/',
    '/102-073/',
    '/435-221/',
    '/120-764/',
    '/079-2657/',
    '/435-954/',
    '/075-1847/',
    '/075-4377/',
    '/435-922/'
  ];
</script>