Filter using jquery

Question

I have a set of divisions;

<div id="people">
  <div>
    <p>Joe Blogs</p>
    <img src=".." />
  </div>
  <div>
    <p>Jane Doe</p>
    <img src=".." />
  </div>
</div>

I want to be able to have an input text box, which when typed in, it will search through the divisions (in the p tag) and if the string matches in part or whole it will show the division, otherwise hide all the non matching divisions.

How would I best go about this using jQuery?

Many thanks?

What is the match done on? I assume the text of the `
` element. Also, can you show the code you have so far. — Rory McCrossan, Jan 09 '13 at 10:16

score 2 · Accepted Answer · edited May 23 '17 at 12:12

Depending on the size of the list, the :contains selector does a good job.

DEMO

$(function() {
  $("#filter").on("keyup",function() {
    var val = $(this).val();
    var people = $("#people > div");
    if (val=="") people.show();
    else {
      people.hide()
      $("#people > div:contains('"+val+"')").show();
    }
  });
});

This is case sensitive by the way For a clever case in sensitive method, look here https://stackoverflow.com/a/4936066/295783

score 1 · Answer 2 · edited Jan 09 '13 at 10:30

DEMO

REFERENCE

var results = [];
$("#people p").each(function(){
   results.push($(this).text());
});

jQuery('#filter').on('keyup', function(event){
    var term = jQuery(this).val();
    var htm = '';
    jQuery('#result').empty().hide();

    //Keys with codes 40 and below are special (enter, arrow keys, escape, etc.), Key code 8 is backspace.
    if(event.keyCode > 40 || event.keyCode <91  || event.keyCode == 8 ||
      event.keyCode == 20 || event.keyCode == 16 || event.keyCode == 9 ||
      event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 ||
      event.keyCode == 40) {
        for(x in results){
            var match = results[x];
            if(match.toLowerCase().indexOf(term.toLowerCase()) != -1){
                var o = '<b><u>'+term+'</u></b>';
                var a = match.replace(term, o);
                htm += '<li>'+a+'</li>';
            }
        }
        var output = '<ol>' + htm + '</ol>';
        if (htm.length > 0) {
            jQuery('#result').show().append(output);
        }
    }
    if(term.length == 0){
        jQuery('#result').empty().hide();
    }
});

score 1 · Answer 3 · answered Jan 09 '13 at 10:42

It is better to filter data using javascript objects (you get data from server, filter them and display with templating engine (jsrender or anything else)).

For your example it could look like:

var timer,
    items = $('#people > div');

var refreshFilter = function(txt) {
    clearTimeout(timer);
    timer = setTimeout(function() {
        var showItems = items.find("p:contains('" + txt + "')").closest('div').show();
        items.not(showItems).hide();
    }, 200);
};

$('#search').keyup(function () {
    refreshFilter(this.value);
});

Demo: http://jsfiddle.net/rptgf/

I like the .not here. I wanted to see if I could chain the :contains — mplungjan, Jan 09 '13 at 10:46

Filter using jquery

3 Answers3