Question

我有一个网站，其中包含一个用户个人资料列表，每个用户个人资料都在一个单独的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淡出。

使用上面的示例，如果访问者输入搜索字符串＆＃34; Smith＆＃34;约翰和简史密斯都会保持可见，但汤姆诺兰div会淡出。如果访客要进入汤姆，简和约翰史密斯都会淡出，但汤姆诺兰仍然可见。

我试图使用jQuery实现这一目标。我找到了这个链接：http://dinowebs.net/index.php/highlighting-matching-text-in-search-results-with-jquery/，但它实际上是我试图实现的相反效果，我无法弄清楚如何根据我的要求修改它。任何帮助将不胜感激！

Answer 1

$(':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"/>

Answer 2

// 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 - 注意这个解决方案，您需要在名称之间加上下划线或将它们放在一起。它很有效..它很快。我还没有使用data-id，因为我主要做php。无论如何这里是表明它有效的小提琴---＆gt; 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" />

Answer 3

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

如何使用jQuery搜索字符串过滤结果

3 个答案: