代码之家 › 专栏 › 技术社区 › AlexW

jquery-筛选下拉列表,如果找不到结果,则插入文本

jquery javascript

AlexW · 技术社区 · 7 年前

我已经将在线找到的一些代码修改为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 .

4 回复 | 直到 7 年前

David Thomas 7 年前

一种方法是向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>

drodil 7 年前

添加到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/

DesignMonkeyJim 7 年前

此示例创建一个对可见下拉项进行计数的变量

$('.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>

SusheelKumar 7 年前

尝试此选项可查看“未找到结果”。

$("#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>