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

问题描述

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

how to apply filter option for following html code that will check and display on real time input given.

 <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 block1style =color：white; background-color：rgb（98,128,145）;> Nick< / div> 需要显示&其他两个div需要隐藏。请任何人都可以建议一个好方法。

Example: When user type nick on search box then only <div class="answer block1" style="color: white; background-color: rgb(98, 128, 145);">Nick</div> is need to show & other two div is need to hide .Please anyone can suggest a good method .

推荐答案

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

I added with oninput event Its will check and display on real time input given. Case sensitive also.At the time string empty.It wont display anything.Its will search the each letter of containing in result

使用

更新答案区分大小写选择：

Update the answer with
Case sensitive select : see the reference

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

  });

<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>

这篇关于使用实时输入进行Jquery搜索，例如Angular JS中的Filter选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！