在动态复选框列表控件中搜索或过滤

Question

const filterEl = document.querySelector('#filter');
const els = Array.from(document.querySelectorAll('#mdi > span'));
const labels = els.map(el => el.textContent);
const handler = value => {
  const matching = labels.map((label, idx, arr) => label.toLowerCase().includes(value.toLowerCase()) ? idx : null).filter(el => el != null);

  els.forEach((el, idx) => {
    if (matching.includes(idx)) {
      els[idx].style.display = 'block';
    } else {
      els[idx].style.display = 'none';
    }
  });
};

filterEl.addEventListener('keyup', () => handler.call(null, filterEl.value));


const filterEl2 = document.querySelector('#filter1');
const elss = Array.from(document.querySelectorAll('#mdii > span'));
const labelss = elss.map(el => el.textContent);
const handlerr = value => {
  const matching = labelss.map((label, idx, arr) => label.toLowerCase().includes(value.toLowerCase()) ? idx : null).filter(el => el != null);

  elss.forEach((el, idx) => {
    if (matching.includes(idx)) {
      elss[idx].style.display = 'block';
    } else {
      elss[idx].style.display = 'none';
    }
  });
};

filterEl2.addEventListener('keyup', () => handlerr.call(null, filterEl2.value));

span {
  display: block;
}

#mdi {
border:1px solid #ccc;
height:100px;
overflow-y:scroll;
width:250px;
background:#ccc;
border-radius:5px;
padding:5px;
}
#mdii {
border:1px solid #ccc;
height:100px;
overflow-y:scroll;
width:250px;
background:#ccc;
border-radius:5px;
padding:5px;
}

<label for="filter">Filter record&nbsp;</label><input id="filter" type="text" class="filter">
<br/><br/>
<div id="mdi">
  <span><input class="talents_idmd-checkbox" type="checkbox" checked="" value="616">Child care</span>
  <span><input class="talents_idmd-checkbox" type="checkbox" value="615">Counseling</span>
  <span><input class="talents_idmd-checkbox" type="checkbox" value="612">Percursion</span>
  <span><input class="talents_idmd-checkbox" type="checkbox" value="611">Playing drums</span>
  <span><input class="talents_idmd-checkbox" type="checkbox" checked="" value="610">Playing guitar</span>
  <span><input class="talents_idmd-checkbox" type="checkbox" value="609">Playing Piano</span>
  <span><input class="talents_idmd-checkbox" type="checkbox" value="613">Sound equipment </span>
  <span><input class="talents_idmd-checkbox" type="checkbox" value="614">Ushering</span>
</div>

<br>

<label for="filter1">Filter record&nbsp;</label><input id="filter1" type="text" class="filter">
<br/><br/>
<div id="mdii">
  <span><input class="talents_idmd-checkbox" type="checkbox" checked="" value="616">Home pomade</span>
  <span><input class="talents_idmd-checkbox" type="checkbox" value="615">Comb</span>
  <span><input class="talents_idmd-checkbox" type="checkbox" value="612">Sticker</span>
  <span><input class="talents_idmd-checkbox" type="checkbox" value="611">Drums</span>
  <span><input class="talents_idmd-checkbox" type="checkbox" checked="" value="610">Playing guitar</span>
  <span><input class="talents_idmd-checkbox" type="checkbox" value="609">Playing Piano</span>
  <span><input class="talents_idmd-checkbox" type="checkbox" value="613">Sound equipment </span>
  <span><input class="talents_idmd-checkbox" type="checkbox" value="614">Ushering</span>
</div>

我有一个动态构建的复选框列表控件，但是当在搜索输入字段中输入a值时，我想过滤键上的值

<!-- search box -->
<input type="text" class="filter" title="Filter record">


<!-- div to search in -->

<div id="mdi" style="width:250px;" class="talents_idmd">
<input class="talents_idmd-checkbox" type="checkbox" checked="" value="616"><span id="talents_idspantext">Child care</span>
<br>
<input class="talents_idmd-checkbox" type="checkbox" value="615">
<span id="talents_idspantext">Counseling</span>
<br>
<input class="talents_idmd-checkbox" type="checkbox" value="612"><span id="talents_idspantext">Percursion</span>
<br>
<input class="talents_idmd-checkbox" type="checkbox" value="611"><span id="talents_idspantext">Playing drums</span>
<br>
<input class="talents_idmd-checkbox" type="checkbox" checked="" value="610"><span id="talents_idspantext">Playing guitar</span>
<br>
<input class="talents_idmd-checkbox" type="checkbox" value="609"><span id="talents_idspantext">Playing Piano</span>
<br>
<input class="talents_idmd-checkbox" type="checkbox" value="613"><span id="talents_idspantext">Sound equipment </span>
<br>
<input class="talents_idmd-checkbox" type="checkbox" value="614"><span id="talents_idspantext">Ushering</span>
<br>
</div>

必需的结果是，例如，是否在类名称为 filter 的搜索框中输入了育儿，div应该仅显示

<input class="talents_idmd-checkbox" type="checkbox" checked="" value="616"><span id="talents_idspantext">Child care</span>
<br>

并且由于我动态生成了带有每个 this 关键字顶部搜索的div控件，因此应允许在当前对象而非全部对象上进行搜索。谢谢

我尝试过

 $('.filter').on("keyup",function(){
      var txt = $(this).val(); 
       $('.<?php echo $appendClass;?>md-checkbox,#<?php echo $appendClass;?>spantext').hide();
        $('.<?php echo $appendClass;?>md-checkbox,#<?php echo $appendClass;?>spantext').each(function(){
         if($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1){
             $(this).show();
         }
      });
  });

使用jquery are $ appendClass是一个动态名称，因此，如果我在页面上有多个这样的控件，它们都将具有唯一的类名称

Answer 1

如果我理解正确，则希望过滤复选框以仅显示与用户输入过滤器匹配的复选框。您可以通过执行以下类似操作来实现此目标。我还删除了一些看起来不正确或不必要的HTML。

const filterEl = document.querySelector('#filter');
const els = Array.from(document.querySelectorAll('#mdi > span'));
const labels = els.map(el => el.textContent);
const handler = value => {
  const matching = labels.map((label, idx, arr) => label.toLowerCase().includes(value.toLowerCase()) ? idx : null).filter(el => el != null);

  els.forEach((el, idx) => {
    if (matching.includes(idx)) {
      els[idx].style.display = 'block';
    } else {
      els[idx].style.display = 'none';
    }
  });
};

filterEl.addEventListener('keyup', () => handler.call(null, filterEl.value));

span {
  display: block;
}

<label for="filter">Filter record&nbsp;</label><input id="filter" type="text" class="filter">
<br/><br/>
<div id="mdi">
  <span><input class="talents_idmd-checkbox" type="checkbox" checked="" value="616">Child care</span>
  <span><input class="talents_idmd-checkbox" type="checkbox" value="615">Counseling</span>
  <span><input class="talents_idmd-checkbox" type="checkbox" value="612">Percursion</span>
  <span><input class="talents_idmd-checkbox" type="checkbox" value="611">Playing drums</span>
  <span><input class="talents_idmd-checkbox" type="checkbox" checked="" value="610">Playing guitar</span>
  <span><input class="talents_idmd-checkbox" type="checkbox" value="609">Playing Piano</span>
  <span><input class="talents_idmd-checkbox" type="checkbox" value="613">Sound equipment </span>
  <span><input class="talents_idmd-checkbox" type="checkbox" value="614">Ushering</span>
</div>