如何使用jQuery搜索字符串筛选结果

How to filter results using jQuery search string

本文关键字：筛选 结果 字符串 搜索 何使用 jQuery      更新时间：2023-09-26

我有一个网站，它有一个用户配置文件列表，每个用户配置文件都在一个单独的div中，类为user-profile，每个用户都有一个与其名称相同的唯一id。所有这些都在一个#reporting容器中。例如

<div id="reporting">
    <div class="user-profile" id="John Smith">...content...</div>
    <div class="user-profile" id="Jane Smith">...content...</div>
    <div class="user-profile" id="Tom Nolan">...content...</div>
</div>

然后我有一个输入，我正在尝试用它来过滤结果。我希望用户输入一个字符串，如果该字符串不包含在元素的ID中，则使user-profiles淡出。

使用上面的示例，如果访问者输入搜索字符串"Smith"，John和Jane Smith都将保持可见，但Tom Nolan div将淡出。如果访客进入汤姆，简和约翰·史密斯都会消失，但汤姆·诺兰仍然可见。

我正在尝试使用jQuery来实现这一点。我找到了这个链接：http://dinowebs.net/index.php/highlighting-matching-text-in-search-results-with-jquery/，但这几乎是我试图达到的相反效果，我不知道如何根据我的要求进行修改。任何帮助都将不胜感激！

$(':input[name=filter]').on('input',function() {
  
  //get value just typed into textbox -- see .toLowerCase()
  var val = this.value.toLowerCase();
  
  //find all .user-profile divs
  $('#reporting').find('.user-profile')
  //find those that should be visible
  .filter(function() {
    return $(this).data('id').toLowerCase().indexOf( val ) > -1;
  })
  
  //make them visible
  .show()
  
  //now go back and get only the visible ones
  .end().filter(':visible')
  
  //filter only those for which typed value 'val' does not match the `data-id` value
  .filter(function() {
    return $(this).data('id').toLowerCase().indexOf( val ) === -1;
  })
  
  //fade those out
  .fadeOut();
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="reporting">
    <div class="user-profile" data-id="John Smith">...content...1</div>
    <div class="user-profile" data-id="Jane Smith">...content...2</div>
    <div class="user-profile" data-id="Tom Nolan">...content...3</div>
</div>
<input type="text" name="filter"/>

// build an array of values
var data = [];
jQuery('.user-profile').each(function () {
    var upid = jQuery(this).attr('id'); // user profile id
    data.push(upid);
});
// on change of text input get value of the text input then analyze the reporting div children ids (data array), fade out any who has an id that doesn't contain the letter(s)
jQuery('[name="filter"]').change(function (e) {
    var sv = jQuery(this).val();
    // check value against data array values
    for (var i = 0; i < data.length; i++) {
        var tupid = data[i]; // this user profile id
        var re = new RegExp(sv, "gi"); // make a regex
        var check = tupid.match(re); // see if there is a match
        var theid = '#'+tupid; // build actual id       
        // if this user profile id doesn't match something in the input fade out, if it does fade in
        if (Array.isArray(check) === false) {            
            jQuery(theid).fadeOut();
        }else{
            jQuery(theid).fadeIn();
        }
    }
});

这是html——注意，对于这个解决方案，您需要在名称之间加下划线，或者将它们放在一起。它有效。。它很快。我还没有使用数据id，因为我主要使用php。不管怎样，这是小提琴来展示它的作用--->http://jsfiddle.net/eot5tfaq/

<div id="reporting">
    <div class="user-profile" id="JohnSmith">...content...</div>
    <div class="user-profile" id="JaneSmith">...content...</div>
    <div class="user-profile" id="TomNolan">...content...</div>
</div>
<input name="filter" type="text" placeholder="Enter Your Search" />


$(document).ready(function(){
  $('#filter').keyup(function(){
   var value = $(this).val().toLowerCase();
   $('#reporting .user-profile').filter(function(){
   $(this).toggle($(this).attr('data-id').toLowerCase().indexOf(value) > -1);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="reporting">
    <div class="user-profile" data-id="John Smith">...content...1</div>
    <div class="user-profile" data-id="Jane Smith">...content...2</div>
    <div class="user-profile" data-id="Tom Nolan">...content...3</div>
</div>
<input type="text" name="filter" id="filter"/>

$(document).ready(function(){
        $('#filter').keyup(function(){
            var value = $(this).val().toLowerCase();
            $('#reporting .user-profile').filter(function(){
                $(this).toggle($(this).attr('data-id').toLowerCase().indexOf(value) > -1);
            });
        });
    });

这是HTML

<div id="reporting">
<div class="user-profile" data-id="John Smith">...content...1</div>
<div class="user-profile" data-id="Jane Smith">...content...2</div>
<div class="user-profile" data-id="Tom Nolan">...content...3</div>

相关文章：