How to implement the Search function using JavaScript or Jquery?

Question

I am writing a code where all persons’ names come from Facebook API. and it is showing in the lightbox. Now I want to implement search feature/ functionality using Javascript/JQuery. Can somebody help me with this?

 <div> <input type="text" id="search-criteria"/>

    <input type="button" id="search" value="search" onClick="tes();"/> </div>

<fieldset>

    <legend>Invite Facebook Friend</legend>

    <div class="fbbox">

    <img src="images/User.png" class="fbimg" />

    <div class="fix"><label for="check-2" class="left"> James </label></div>

    <input type="checkbox" name="fb" id="check-1" value="action" class="leftcx"/>

    </div>

    <div class="fbbox">

    <img src="images/User.png" class="fbimg" />

    <div class="fix"><label for="check-2" class="left">Alan </label></div>

    <input type="checkbox" name="fb" id="check-2" value="comedy" class="leftcx"/>

    </div>

    <div class="fbbox">

    <img src="images/User.png" class="fbimg" />

    <div class="fix"><label for="check-3" class="left"> Mathew </label></div>

    <input type="checkbox" name="fb" id="check-3" value="epic" class="leftcx"/>

    </div>

Answer 1

You can do like this:

$("#search-criteria").on("keyup", function() {

    var g = $(this).val();

    $(".fbbox .fix label").each( function() {

        var s = $(this).text();

        if (s.indexOf(g)!=-1) {

            $(this).parent().parent().show();

        }

        else {

            $(this).parent().parent().hide();

        }

    });

});​

Or in a better way:

$("#search-criteria").on("keyup", function() {

    var g = $(this).val().toLowerCase();

    $(".fbbox .fix label").each(function() {

        var s = $(this).text().toLowerCase();

        $(this).closest('.fbbox')[ s.indexOf(g) !== -1 ? 'show' : 'hide' ]();

    });

});​

Want to be a full stack developer? Check out the full stack developer course from Intellipaat.