Question

我有一个非常长的项目列表，希望用户能够轻松地进行搜索。

我正在尝试实施此解决方案： https://www.w3schools.com/howto/howto_js_filter_lists.asp。

但是，由于CMS中的限制，我需要将此列表拆分为多个div。我目前有两个ID为“ s-lg-254”和“ s-lg-255”的div，每个div包含一个ID为“ ul和“ ul1”的ul2。

这是当前的代码：

    function journalsearch(ulID) {
   // Declare variables
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('input1');
  filter = input.value.toUpperCase();
ul = document.getElementById(ulID);
  li = ul.getElementsByTagName('li');

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

还有HTML search box：

<input type="text" id="input1" onkeyup="journalsearch('ul1', 'ul2')" placeholder="Search for journal titles...">

搜索框按预期过滤了两个列表中的第一个，但是我尝试过说服它同时过滤第二个列表。

我对Javascript还是很陌生，请多多帮助！

Answer 1

一种解决方案是根据需要传递尽可能多的id，但将其作为参数循环引用。

function journalsearch() {
   // Declare variables
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('input1');
  filter = input.value.toUpperCase();
  
  for (var j=0; j < arguments.length; j++) {
  ulID = arguments[j];
ul = document.getElementById(ulID);
  li = ul.getElementsByTagName('li');

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
  li[i].style.display = "";
} else {
  li[i].style.display = "none";
}
  }
  }
}

<input type="text" id="input1" onkeyup="journalsearch('ul1', 'ul2')" placeholder="Search for journal titles...">
<ul id="ul2"></ul>
<ul id="ul1"></ul>

Answer 2

我建议将所有列表项收集到一个集合中，然后对其进行迭代。这样，您可以避免嵌套循环。

function journalsearch (firstList, secondList) {
  var listItemsSelector = [firstList, secondList].map(function (selector) {
    return '#' + selector + ' li';
  }).join(', ')
  var listItems = document.querySelectorAll(listItemsSelector);
  var filter = document.getElementById('input1').value.toUpperCase();
  Array.prototype.forEach.call(listItems, function (item) {
    var a = item.getElementsByTagName('a')[0]
    var txtValue = a.textContent || a.innerText
    item.style.display = (txtValue.toUpperCase().indexOf(filter) > -1) ? '' : 'none';
  })
}

<input type="text" id="input1" onkeyup="journalsearch('ul1', 'ul2')" placeholder="Search for journal titles...">
<ul id="ul1">
 <li><a>List 1, item 1</a></li>
 <li><a>List 1, item 2</a></li>
</ul>
<ul id="ul2">
 <li><a>List 2, item 1</a></li>
 <li><a>List 2, item 2</a></li>
</ul>

如何使用JavaScript一次过滤和搜索多个div？

2 个答案: