主页 / 问题 / 1422381
Accepted
Arteil
Asked:2022-08-21 15:17:19 +0000 UTC2022-08-21 15:17:19 +0000 UTC

在 <select> 中查找元素

  • 772

有一个列表搜索<select>可以隐藏所有与搜索中输入的内容不匹配的项目。但是有一个问题，当在一个大列表（4500 个元素）中搜索时，它会挂起几秒钟。您还可以搜索或优化哪些其他方式？

document.addEventListener("click", function(e) {
    let input = document.getElementById(dataTargetID + 'Input'); 
    let val = input.value.trim().toUpperCase();
    let searchItems = document.querySelectorAll('#'+dataTargetID + ' option');
    if (e.target.classList.contains('keyboard__key')) {
        if (val != '') {
            searchItems.forEach(function (elem){
                if (elem.innerText.toUpperCase().search(val) == -1) {
                    elem.classList.add('hidden')
                }
                else {
                    elem.classList.remove('hidden');
                }
            });
        }
        else {
            searchItems.forEach(function (elem){
                elem.classList.remove('hidden');
            });
        }
    }
})
javascript html

2 个回答

  1. Best Answer

    我认为它会更快，因为：

    • input无需每次搜索searchItems
    • includes 快于search
    • for of 快于forEach
    • 没有额外的if else

    // Prepare options (Start)
const select = document.querySelector('#select');
const fragment = document.createDocumentFragment();

for (let i = 0; i < 4500; ++i) {
  const option = document.createElement('option');
  option.innerHTML = i + 1;
  
  fragment.append(option);
}

select.append(fragment);

// Prepare options (End)


const input = document.querySelector('#input');
const searchItems = document.querySelectorAll('#select option');

input.addEventListener('input', function(e) {
  const target = e.target;
  const val = target.value.trim().toUpperCase();

  if (!target.classList.contains('keyboard__key')) return;

  for (const elem of searchItems) {
    const needShow = val !== '' && !elem.innerText.toUpperCase().includes(val);

    elem.classList.toggle('hidden', needShow);
  }
})
    .hidden {
  display: none;
}

input {
  position: absolute;
}

select {
  position: absolute;
  top: 50px;
}
    <input id="input" class="keyboard__key">
<select id="select" size="20">
</select>

    我想出了一个没有类的变体，但是通过fragment-s。根据我的检查和在线测试，这在 FF 和 Chrome 中运行得更快。

    如果我理解正确，它会更快，因为：

    • 搜索option-ov 直接在select
    • 删除元素然后一次插入所有必要的元素比分别为每个元素分配一个类更快（老实说，我不知道为什么会这样，如果有人解释原因，我将非常感激）

    // Prepare options (Start)
const select = document.querySelector('#select');
const fragment = document.createDocumentFragment();

for (let i = 0; i < 4500; ++i) {
  const option = document.createElement('option');
  option.innerHTML = i + 1;
  
  fragment.append(option);
}

select.append(fragment);

// Prepare options (End)


const input = document.querySelector('#input');
const searchItems = select.querySelectorAll('option');

input.addEventListener('input', function(e) {
  const target = e.target;
  const val = target.value.trim().toUpperCase();
  const fragment = document.createDocumentFragment();

  if (!target.classList.contains('keyboard__key')) return;
  
  for (const elem of searchItems) {
    elem.remove();
    
    if (val === '' || elem.innerText.toUpperCase().includes(val)) {
      fragment.append(elem);
    }
  }

  select.append(fragment);
})
    input {
  position: absolute;
}

select {
  position: absolute;
  top: 50px;
}
    <input id="input" class="keyboard__key">
<select id="select" size="20">
</select>

    • 3

  2. 一站式解决方案，用于多个input“查询”输入和select搜索。

    JS：

    const input = document.querySelectorAll('.search-select');
let cache;

[...input].map(elem => {
  const select = document.querySelector('#'+elem.dataset.for);
  if(select) {
    elem.addEventListener('focus', e => cache = [...document.querySelector('#'+e.target.dataset.for).children);
    elem.addEventListener('input', e => {
      if(e.target.value.length > 0) {
        cache.forEach(el => el.style.display = el.innerText.trim().includes(e.target.value) ? '' : 'none')
      } else cache.forEach(el => el.style.display = '');
    });
  }
})

    Potestiv 注意到它.forEach的工作速度更快，因此使用它。
    .includes()在文本中找到任何匹配项，可以将其替换为另一个，但会减慢搜索速度。

    对我而言，主要优点是当focuse inputa 保存 a 的内容select（基本上是 all option）时，它会在迭代之后。

    HTML：

    <input type="text" class="search-select" data-for="select">
<select id="select">
  <!-- ... -->
</select>

    with 的绑定input与andselect类似，JS 会查找.labelinputselectinput[data-for]

    代码如何在 4500 选项上工作的示例

    Ps 如何比较和什么。我拿了一个 4500 的数组option，它在上面的链接上，并通过了一些方法：

    .map()- ~28ms
    .forEach()- ~6ms
    for()- ~26ms
    while() i++- ~21ms
    while(len--)- ~19ms

    迭代动作是用 even 隐藏元素value。
    测试代码

    我试图用 做一个变体.filter()，但它并没有变得更好，相反，执行时间增加了。

    我的代码使用值匹配，它.innerText从 4500option秒返回value并且innerText等于序数，与值匹配 -1需要约 131 毫秒。
    建议同事将搜索替换为.innerText，我尝试了一些选项，结果如下：

    .innerText- ~131ms
    .value- ~20ms - ~
    .innerHTML26ms
    .textContent- ~25ms
    .dataset- ~23ms

    对于后四个，差异不是特别明显，但建议使用.value.

    • 1

相关问题