Question

我的网页上有很多li列表。我想用多个单词过滤。当我在按键上输入搜索字段时。使用％添加条件。

这是我的

列表

<input id="search" type="text" name="">

<ul class="list">
<li><p>catA - Alaska - item1 - subcat1</p></li>
<li><p>catB - Arizona - item2 - subcat3</p></li>
<li><p>catA - alaska - item1 - subcat1</p></li>
<li><p>catC - california- item3 - subcat1</p></li>
<li><p>catB - alaska - item1 - subcat1</p></li>

我正在使用此代码过滤项目

$("#search").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $(".class li").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
});

搜索查询

cata%ala%cat1%

预期结果

<li><p>catA - Alaska - item1 - subcat1</p></li>

我该怎么做

Answer 1

您可以执行以下操作：

$("#search").on("keyup", function() {
  var value = $(this).val().toLowerCase().trim();
  var v = value.split("%");
  $(".list li").each(function(j,k) {
    var s = true;
    $.each(v, function(i, x) {
      if (s) {
        s = $(k).text().toLowerCase().indexOf(x) > -1;
      }
    });
    $(this).toggle(s);
  });
});

演示

$("#search").on("keyup", function() {
  var value = $(this).val().toLowerCase().trim();
  var v = value.split("%");
  $(".list li").each(function(j,k) {
    var s = true;
    $.each(v, function(i, x) {
      if (s) {
        s = $(k).text().toLowerCase().indexOf(x) > -1;
      }
    });
    $(this).toggle(s);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="search" type="text" name="">

<ul class="list">
  <li>
    <p>catA - Alaska - item1 - subcat1</p>
  </li>
  <li>
    <p>catB - Arizona - item2 - subcat3</p>
  </li>
  <li>
    <p>catA - alaska - item1 - subcat1</p>
  </li>
  <li>
    <p>catC - california- item3 - subcat1</p>
  </li>
  <li>
    <p>catB - alaska - item1 - subcat1</p>
  </li>

先进的键盘上的jQuery搜索过滤器

1 个答案: