Question

我试图在密钥上过滤span标记列表。

我创造了一些只会返回奇怪价值的东西......

 function searchClients() {
   var clientSearch = document.getElementById("clientSearch");
   var s = clientSearch.value;
   $('.select-options span:not(:contains("' + s + '"))').hide();
 }

 $("#clientSearch").keyup(function() {
   searchClients();
 });

Answer 1

每次尝试刷新您的显示器：

请注意，您的搜索区分大小写。

function searchClients() {
   var clientSearch = document.getElementById("clientSearch");
   var s = clientSearch.value;
   $('.select-options span').show();
   $('.select-options span:not(:contains("' + s + '"))').hide();
 }

 $("#clientSearch").keyup(function() {
   searchClients();
 });

span {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select-options ps-container below ps-active-y">

  <input id="clientSearch" type="text">

<span>Bitcoin</span><span>Cat</span><span>Whiskey</span><span>Table</span>

Answer 2

在这里：https://jsfiddle.net/5u373deu/6/

问题在于，当用户清除过滤器文本时，您没有显示所有元素。

 function searchClients() {
   var clientSearch = document.getElementById("clientSearch");
   var s = clientSearch.value;
   $('.select-options span').show();
   $('.select-options span:not(:contains("'+s+'"))').hide();
 }

$("#clientSearch").keyup(function() {
  searchClients();
});

Answer 3

要使其区分大小写，您需要覆盖当前的tok

＆＃13;

contains

＆＃13;

jQuery.expr[':'].contains = function(a, index, obj) {
  return jQuery(a).text().toUpperCase()
      .indexOf(obj[3].toUpperCase()) >= 0;
};
function searchClients() {
   var clientSearch = document.getElementById("clientSearch");
   var s = clientSearch.value;
   $('.select-options span').show();
   $('.select-options span:not(:contains("' + s + '"))').hide();
 }

 $("#clientSearch").keyup(function() {
   searchClients();
 });

＆＃13;

span {
  display: block;
}

＆＃13;

OnKeyup搜索字符串和隐藏/显示 - jQuery

3 个答案: