How to implement Search function using JavaScript or jQuery

Question

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 JavaScript/jQuery. Can you help me? How should I implement search function?

Invite Facebook Friend James Alan Mathew

score 18 · Accepted Answer · edited May 18 '15 at 19:19

18

$("#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

edited May 18 '15 at 19:19

Ian Dunn

3,431
6
25
40

answered Dec 25 '12 at 14:33

Muhammad Talha Akbar

9,654
6
37
61

sorry man the code i gave you, don't search by clicking search button but do it automatically! – Muhammad Talha Akbar Dec 25 '12 at 14:37
+1 Nice answer, but I would also make it case insensitive: `var g = $(this).val().toLowerCase();` and `var s = $(this).text().toLowerCase()` - [updated demo](http://jsfiddle.net/Mottie/ztaz6/2/) – Mottie Dec 25 '12 at 23:25
@Mottie I add the link of your fiddle also ;) – Muhammad Talha Akbar Dec 26 '12 at 03:42

score 1 · Answer 2 · answered Dec 25 '12 at 14:27

1

Use Jquery

  $(document).ready(function(){

   var search = $("#search-criteria");
   var items  = $(".fbbox");

   $("#search").on("click", function(e){

        var v = search.val().toLowerCase();
       if(v == "") { 
           items.show();
           return;
       }
        $.each(items, function(){
            var it = $(this);
            var lb = it.find("label").text().toLowerCase();
            if(lb.indexOf(v) == -1) 
                 it.hide();
        });
    });        
});

Demo : http://jsfiddle.net/C3PEc/2/

answered Dec 25 '12 at 14:27

Andy Ecca

1,819
14
13

So... use jQuery just because of `indexOf`, which you don't need jQuery for? – Florian Margaine Dec 25 '12 at 14:28
@FlorianMargaine, use jquery for events and each function. – Andy Ecca Dec 25 '12 at 14:30
@Andy Thank you for help :) – Rushikesh jogle Dec 25 '12 at 19:16
This breaks when you search for "fb 1" then change to "fb 3"... it won't unhide "fb 3". Change this: `if (lb.indexOf(v) == -1) { it.hide(); } else { it.show(); }` – Mottie Dec 25 '12 at 23:28

score 0 · Answer 3 · answered Dec 25 '12 at 14:22

0

Maybe use indexOf method:

var text ="some name";
var search = "some";

if (text.indexOf(search)!=-1) {

    // do someting with found item

}

answered Dec 25 '12 at 14:22

user1276919

508
3
24

score 0 · Answer 4 · answered Dec 26 '12 at 09:20

0

You can use regular expression instead of indexOf as it may not work in IE7/IE8 and using regular expression you will can also use the 'i' modifier to make the search case insensitive.

Thanks

answered Dec 26 '12 at 09:20

user1654525

121
6

How to implement Search function using JavaScript or jQuery

4 Answers4

Linked