Question

如何应用过滤器选项以跟踪html代码，该代码将检查并显示给定的实时输入。

 <div class="block-parent">
  <input type="text" name="search" class="search">
  <div class="answer block1" style="color: white; background-color: rgb(98, 128, 145);">Nick</div>
  <div class="answer block1" style="color: black; background-color: rgb(114, 139, 137);">Sam</div>
  <div class="answer block1" style="color: white; background-color: rgb(123, 138, 115);">John</div>

 </div>

示例：当用户在搜索框中输入nick时，只需要<div class="answer block1" style="color: white; background-color: rgb(98, 128, 145);">Nick</div>来显示＆amp;另外两个div需要隐藏。请任何人都可以建议一个好的方法。

即创建搜索结果，例如 https://docs.angularjs.org/api/ng/filter/filter

Answer 1

您可以分别使用包含和隐藏/显示来检查div的内容

$(function() {
  $("#search").on('change', function(event) {
    var text = $(this).val();
    $('.answer:contains(' + text + ')').show();
    $('.answer:not(:contains(' + text + '))').hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-parent">
  <input type="text" name="search" id="search">
  <div class="answer block1" style="color: white; background-color: rgb(98, 128, 145);">Nick</div>
  <div class="answer block1" style="color: black; background-color: rgb(114, 139, 137);">Sam</div>
  <div class="answer block1" style="color: white; background-color: rgb(123, 138, 115);">John</div>

</div>

希望这有帮助

Answer 2

我添加了oninput事件，它会检查并显示实时输入。 区分大小写。字符串为空时。它不会显示任何内容。它会搜索结果中包含的每个字母

用<更新回答区分大小写的选择：see the reference

＆＃13;

jQuery.expr[':'].Contains = function(a,i,m){
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};

$(document).on('input', '.search',function(event) {
    var text = $(this).val();
     $('.answer').hide();
  
    $('.answer:Contains(' + text+ ')').show();

  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-parent">
  <input type="text" name="search" class="search">
  <div class="answer block1" style="color: white; background-color: rgb(98, 128, 145);">Nick</div>
  <div class="answer block1" style="color: black; background-color: rgb(114, 139, 137);">Sam</div>
  <div class="answer block1" style="color: white; background-color: rgb(123, 138, 115);">John</div>

</div>

＆＃13;

Answer 3

在Geeky的代码之上构建，你可以只做一个不区分大小写：包含可以进行不区分大小写检查的选择器。

＆＃13;

$.expr[':'].caseInsensitiveContains = function(a, i, m) {
  return jQuery(a).text().toLowerCase()
    .indexOf(m[3].toLowerCase()) >= 0;
};

$(function() {
  $("#search").on('keyup', function(event) {
    var text = $(this).val().trim();
    if (text === "") {
      $(".answer").show();
    } else {

      $('.answer:caseInsensitiveContains(' + text + ')').show();
      $('.answer:not(:caseInsensitiveContains(' + text + '))').hide();
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-parent">
  <input type="text" name="search" id="search">
  <div class="answer block1" style="color: white; background-color: rgb(98, 128, 145);">Nick</div>
  <div class="answer block1" style="color: black; background-color: rgb(114, 139, 137);">Sam</div>
  <div class="answer block1" style="color: white; background-color: rgb(123, 138, 115);">John</div>

</div>

＆＃13;

Answer 4

您可以使用jQuery change()方法并检查输入值，然后显示或隐藏相应的div。

Answer 5

试试这个：

$(function() {
    $("#search").on('change', function(event) {
        var text = $(this).val().toLowerCase();
        if(text.length){                
            $('.answer').each(function(){
                if($(this).text().toLowerCase() == text) {
                    $(this).show();
                }
                else $(this).hide();
            })
        } else $('.answer').show();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="block-parent">
     <input type="text" name="search" id="search">
     <div class="answer block1" style="color: white; background-color: rgb(98, 128, 145);">Nick</div>
     <div class="answer block1" style="color: black; background-color: rgb(114, 139, 137);">Sam</div>
     <div class="answer block1" style="color: white; background-color: rgb(123, 138, 115);">John</div>
</div>

即使不区分大小写，也会搜索

Answer 6

给所有div的id然后尝试这个

然后在代码

下面的昵称点击事件中

                $('#div2').css("display", "none");
                $('#div3').css("display", "none");

使用实时输入进行Jquery搜索，例如Angular JS中的Filter选项

6 个答案: