Question

我列出了一些div，我希望能够添加一个允许用户开始输入的输入字段，并且可以按顺序过滤div

我正在尝试下面的代码，但它没有过滤。它也没有抛出任何错误，所以我不知道该做什么......

这是html标记：

<input id="filter" type="text" class="form-control" placeholder="Type here...">


<ul id="equipdetails">
   <li>
      <div class="col-lg-8"><label data-equipid="3" class="mt-checkbox mt-checkbox-outline exercise-txt"><input type="checkbox">Pega<span></span></label>
      </div>
      <div class="col-lg-4">
         <div class="exercise-img"></div>
      </div>
   </li>
   <li>
      <div class="col-lg-8"><label data-equipid="4" class="mt-checkbox mt-checkbox-outline exercise-txt"><input type="checkbox">DOT NET<span></span></label>
      </div>
      <div class="col-lg-4">
         <div class="exercise-img"></div>
      </div>
   </li>
   <li>
      <div class="col-lg-8"><label data-equipid="5" class="mt-checkbox mt-checkbox-outline exercise-txt"><input type="checkbox">Java<span></span></label>
      </div>
      <div class="col-lg-4">
         <div class="exercise-img"></div>
      </div>
   </li>
   <li>
      <div class="col-lg-8"><label data-equipid="6" class="mt-checkbox mt-checkbox-outline exercise-txt"><input type="checkbox">JAVA Script<span></span></label>
      </div>
      <div class="col-lg-4">
         <div class="exercise-img"></div>
      </div>
   </li>
   <li>
      <div class="col-lg-8"><label data-equipid="26" class="mt-checkbox mt-checkbox-outline exercise-txt"><input type="checkbox">Ruby On Rails<span></span></label>
      </div>
      <div class="col-lg-4">
         <div class="exercise-img"></div>
      </div>
   </li>
   <li>
      <div class="col-lg-8"><label data-equipid="27" class="mt-checkbox mt-checkbox-outline exercise-txt"><input type="checkbox">NEW QSS<span></span></label>
      </div>
      <div class="col-lg-4">
         <div class="exercise-img"></div>
      </div>
   </li>
</ul>

这是JS代码

$('#filter').keyup(function()
  {
          var val = $.trim(this.value).toUpperCase();
          $(".mt-checkbox").each(function()
          {
                  var parent = $(this).parent(),
                          length = $(this).text().length > 0;
                  if (length && $(this).text().search(new RegExp(filter, "i")) < 0)
                  {
                          parent.fadeOut("slow");
                  }
                  else
                  {
                          parent.show();
                  }
          });
  })

这是我的小提琴

http://jsfiddle.net/cod7ceho/145/

Answer 1

您需要将变量val传递给搜索函数，没有变量定义为filter

$(this).text().search(new RegExp(val, "i")

但是也可以删除点，遍历到li而不是直接的父亲

var parent = $(this).closest('li'),

Fiddle

Answer 2

你小提琴中的

public class Test { public static void main(String args[]) { int targetNumber = 1743; int userGuess = 1564; String target = "" + targetNumber; String guess = "" + userGuess; for (int i = 0; i < guess.length(); i++) { char ch = guess.charAt(i); int j = target.indexOf(ch); if (j == -1) { System.out.println("I"); } else if (j == i) { System.out.println("A"); } else { System.out.println("S"); } } } }指的是身份filter的{{1}}

input

的值需要什么

更改此

filter

到

input

它应该有用。

Answer 3

使用indexOf()搜索文本中的值，例如$(this).text().toUpperCase().trim().indexOf(val) < 0

$('#filter').keyup(function()
  {

          var val = $.trim(this.value).toUpperCase();
          console.log(val);
          $(".mt-checkbox").each(function()
          {
                  var parent = $(this).parent(),
                          length = $(this).text().length > 0;

                  if (length && $(this).text().toUpperCase().trim().indexOf(val) < 0)
                  {
                          parent.fadeOut("slow");
                  }
                  else
                  {
                          parent.show();
                  }
          });
  })

<强> JSFIDDLE

其他方法是使用您正在使用的相同方法并用val替换正则表达式中的过滤器，因为您需要在regex中发送值而不是对象本身

$(this).text().search(new RegExp(val, "i")) < 0)

此外，您希望在我们为此填充后删除点li并选择使用$(this).closest('li');

JSFIDDLE

这两种方法都有效，这取决于你想要使用哪种方法。

如何隐藏/显示作用于键盘过滤器输入的div

3 个答案: