Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to implement Search function using Javascript or jquery

here i write code where all persons names comes from Facebook API . and it is showing on lightbox. now i want to implement search functionality using javasciprt/jquery . Can you help me how should i implement search function ?

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

Image

like image 901
Rushikesh jogle Avatar asked Dec 25 '12 14:12

Rushikesh jogle


1 Answers

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

Working Fiddle

or 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' ]();
    });
});​

Working Fiddle

like image 146
Muhammad Talha Akbar Avatar answered Oct 17 '22 16:10

Muhammad Talha Akbar