Question

I have this code in my html:

<form>
        <div style="width:530px; height:220px; overflow-y:scroll;">

              <div class="people">
                <label class="checkbox_1" for="1">
                  <img src="1.jpg" />
                  <span>
                    Jolly Bob Monumir
                  </span>
                </label>
                <input type="checkbox" name="people[]" value="1" id="1" />
              </div>

              <div class="people">
                <label class="checkbox_1" for="2">
                  <img src="2.jpg" />
                  <span>
                    Jonathan Monumir
                  </span>
                </label>
                <input type="checkbox" name="people[]" value="2" id="4" />
              </div>

              <div class="people">
                <label class="checkbox_1" for="3">
                  <img src="3.jpg" />
                  <span>
                    Misoury Crow
                  </span>
                </label>
                <input type="checkbox" name="people[]" value="3" id="3" />
              </div>

              <div class="people">
                <label class="checkbox_1" for="4">
                  <img src="4.jpg" />
                  <span>
                    Michael Crow
                  </span>
                </label>
                <input type="checkbox" name="people[]" value="4" class="checkbox_1" id="4" />
              </div>

        </div>                
    </form>

After page loads whole form should be displayed. Now I would like to have inputbox and when I type in this box letters names of people it should automatically leave visible those names (divs with classes “people”) which contain letters I type.

Example: I type “Jo”, divs with Jolly Bob Monumir and Jonathan Monumir should be displayed and other should stay hidden. Then when I type “Cro”, Misoury Crow and Michael Crow should be visible., etc. How can I do this with jquery? thanks in advance

UPDATE:
I found this and it works like a charm!

$('#search-criteria').on('keyup', function(){
    $('div.people').hide();
    var txt = $('#search-criteria').val();
    $('div.people').each(function(){
       if($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1){
           $(this).show();
       }
    });
});

Answer 1

UPDATE:
I found this and it works like a charm!

$('#search-criteria').on('keyup', function(){
    $('div.people').hide();
    var txt = $('#search-criteria').val();
    $('div.people').each(function(){
       if($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1){
           $(this).show();
       }
    });
});