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

标签 javascript jquery

我正在尝试过滤 keyup 上的 span 标签列表。

我创建了一些东西,只是它返回了奇怪的值...

https://jsfiddle.net/5u373deu/1/

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

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

最佳答案

要使其区分大小写,您需要覆盖当前的contains

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();
 });
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>

关于javascript - OnKeyup 搜索字符串和隐藏/显示 - jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44798921/

相关文章:

javascript - Bootstrap "hidden-xs"不起作用 + 无法为小视口(viewport)制作粘性页脚

javascript - 持续民意调查有真正的风险吗?

javascript - 如何使用 JavaScript 打开一个下拉菜单并关闭另一个下拉菜单?

javascript - 使用 jquery 操作::选择

javascript - 修改 sphider search.php 文件并帮助我

javascript - AngularJS函数()与指令中的函数工厂()

javascript - Angular 中的动态更新无需使用 ng-repeat。可能的? (使用 Firebase)

javascript - 在循环中的节点子集上调用布局无法正确布局节点

jquery - 如何使用 jquery 数据表插件制作打印选项

javascript - 如何为具有 contenteditable 属性的 div 元素添加 maxlength 限制?