javascript - JQuery - 过滤下拉列表，如果找不到结果则插入文本

Question

我已经将我在网上找到的一些代码改编成一个 jquery 函数。这对我来说非常有用，但是如果过滤器没有任何匹配项，我希望显示“未找到结果”文本。

另外，我如何将它变成一个函数，我可以通过传递多个搜索的输入和下拉列表 ID 来运行它？

$("#devSearch").keyup(function() {
  filter = $("#devSearch").val().toUpperCase()
  div = $("#devDropdown")
  a = div.find("a")
  for (i = 0; i < a.length; i++) {
    if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Devices</a>
    <div class="dropdown-menu dropdown-menu-fixed-height" id="devDropdown">
      <input class="form-control form-control-sm" type="text" placeholder="Search..." id="devSearch" style="width:8rem; margin:0 1rem">
      <a class="dropdown-item" href="#">All Entires</a>
      <a class="dropdown-item" href="#">Big bob</a>
      <a class="dropdown-item" href="#">Little bob</a>
      <a class="dropdown-item" href="#">Sausage</a>
      <a class="dropdown-item" href="#">Chicken</a>
      <span class="filter-results no-results">Oops, nothing found!<span>
    </div>
  </li>
</ul>

JS Fiddle demo .

Answer 1

一种方法是向 HTML 添加更多元素:

然后将以下 jQuery 片段添加到函数中:

// selecting the <a> element with the classes of both
// 'dropdown-item' and 'no-results', using the toggle(switch)
// method to show/hide appropriately:
$('a.dropdown-item.no-results').toggle(

      // here we find select all <a> elements with the class of
      // 'dropdown-item' excluding the item(s) with the class of
      // 'no-results' that match the :visible jQuery/Sizzle selector;
      // we then find the length of that collection and, if that length
      // is equal to zero the 'a.dropdown-item.no-results element is
      // is shown, otherwise it's hidden:
      $('a.dropdown-item:not(.no-results):visible').length === 0
    );

$("#devSearch").keyup(function() {
  filter = $("#devSearch").val().toUpperCase()
  div = $("#devDropdown")
  a = div.find("a")
  for (i = 0; i < a.length; i++) {
    if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "initial";
    } else {
      a[i].style.display = "none";
    }
    $('a.dropdown-item.no-results').toggle(
      $('a.dropdown-item:not(.no-results):visible').length === 0
    );
  }
});

a.dropdown-item.no-results {
  text-decoration: none;
  display: none;
  color: lightgrey;
  cursor: not-allowed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Devices</a>
    <div class="dropdown-menu dropdown-menu-fixed-height" id="devDropdown">
      <input class="form-control form-control-sm" type="text" placeholder="Search..." id="devSearch" style="width:8rem; margin:0 1rem">
      <a class="dropdown-item" href="#">All Entires</a>
      <a class="dropdown-item" href="#">Big bob</a>
      <a class="dropdown-item" href="#">Little bob</a>
      <a class="dropdown-item" href="#">Sausage</a>
      <a class="dropdown-item" href="#">Chicken</a>
      <a class="dropdown-item no-results">No results found</a>
    </div>
  </li>
</ul>