How to filter results using jQuery search string

Question

I have a website that has a list of users profiles each in a separate div with a class of user-profile and each has a unique id equal to their name. All of them are within a #reporting container. For example

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

Then I have an input that I'm trying filter the results with. I would like the user to enter a string, and have the user-profiles fade out if the string is not contained in the ID of element.

Using the example above, if the visitor enters the search string "Smith" both John and Jane Smith would remain visible, but the Tom Nolan div would fade out. If the visitor would to enter Tom, both Jane and John Smith would fade out, but Tom Nolan would remain visible.

I'm trying to achieve this using jQuery. I found this link: http://dinowebs.net/index.php/highlighting-matching-text-in-search-results-with-jquery/ , but it is pretty much the opposite effect I'm trying to achieve, and I couldn't figure out how to modify it to my requirements. Any help would be appreciated!

Answer 1

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

And here is 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>

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

Here is the html -- Note with this solution you need to either put underscores in between names or put them together. It works.. Its quick. I haven't used data-id yet as I primarily do php. Anyhow here is the fiddle to show it works ---> 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

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