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>

Answer 2

添加到您的HTML

<p id="no-results" style="display:none">No results found</p>

然后使用javascript：

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

  if(matchesFound == false) {
     noResults.show();
  } else {
     noResults.hide();
  }
});

https://jsfiddle.net/gz7bmdsh/

Answer 3

此示例创建一个变量，用于计算可见的下拉项

$('.placholder').hide();

$("#devSearch").keyup(function() {
  var count = 0;//create variable
  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";
    }
  }
   // count visible items
  $('.dropdown-item:visible').each(function(){
    count++;
  });
  // hide and show
  if(count === 0){
      $('.placholder').show();
  } else {
     $('.placholder').hide();
  }
  
});

<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">

      <p class="placholder">No results</p>
      <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>
      
    </div>
  </li>
</ul>

Answer 4

尝试此操作以找到“未找到结果”。

$("#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";
    }
    var test=$(".dropdown-item").filter(function () {
      return $(this).css("display") == "none";});
      if(test.length==a.length){
       $(".noData").html("no results found");
      }
      else{
       $(".noData").html("");
      }

  }
});

<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>
    </div>
    <div class="noData"></div>
  </li>
</ul>

jQuery-筛选下拉列表，如果未找到结果，则插入文本

4 个答案: