I am able to show Json data in html view, but how can I now filter json data list based on firstname as I type in search input box, please help me I am new to javascript & jQuery.

HTML

<input type="search" name="search" id="search" value="" />
<div id="placeholder"></div>

Javascript/jQuery

var data={"users":[
        {
            "firstName":"Ray",
            "lastName":"Villalobos",
            "joined": {
                "month":"January",
                "day":12,
                "year":2012
            }
        },
        {
            "firstName":"John",
            "lastName":"Jones",
            "joined": {
                "month":"April",
                "day":28,
                "year":2010
            }
        }
]}

$(data.users).each(function() {
    var output = "<ul><li>" + this.firstName + " " + this.lastName + "--" + this.joined.month+"</li></ul>";
    $('#placeholder').append(output);
});

Here is the fiddle.

I am able to show Json data in html view, but how can I now filter json data list based on firstname as I type in search input box, please help me I am new to javascript & jQuery.

HTML

<input type="search" name="search" id="search" value="" />
<div id="placeholder"></div>

Javascript/jQuery

var data={"users":[
        {
            "firstName":"Ray",
            "lastName":"Villalobos",
            "joined": {
                "month":"January",
                "day":12,
                "year":2012
            }
        },
        {
            "firstName":"John",
            "lastName":"Jones",
            "joined": {
                "month":"April",
                "day":28,
                "year":2010
            }
        }
]}

$(data.users).each(function() {
    var output = "<ul><li>" + this.firstName + " " + this.lastName + "--" + this.joined.month+"</li></ul>";
    $('#placeholder').append(output);
});

Here is the fiddle.

• javascript
• jquery
• json
• filter

2 Answers 2

you can use following

var data = {
    "users": [{
        "firstName": "Ray",
            "lastName": "Villalobos",
            "joined": {
            "month": "January",
                "day": 12,
                "year": 2012
        }
    }, {
        "firstName": "John",
            "lastName": "Jones",
            "joined": {
            "month": "April",
                "day": 28,
                "year": 2010
        }
    }]
}

$(data.users).each(function () {
    var output = "<ul><li>" + this.firstName + " " + this.lastName + "--" + this.joined.month + "</li></ul>";
    $('#placeholder').append(output);
});
$('#search').change(function () {
    var yourtext = $(this).val();
    if (yourtext.length > 0) {
        $("li:contains(" + yourtext + ")").addClass('notify');
    }
    else{
        $("li:contains(" + yourtext + ")").removeClass('notify');
    }
});

.notify{
    border: 1px solid red;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="search" name="search" id="search" value="" />
<div id="placeholder"></div>

Up Dated

var data = {
    "users": [{
        "firstName": "Ray",
            "lastName": "Villalobos",
            "joined": {
            "month": "January",
                "day": 12,
                "year": 2012
        }
    }, {
        "firstName": "John",
            "lastName": "Jones",
            "joined": {
            "month": "April",
                "day": 28,
                "year": 2010
        }
    }]
}

$(data.users).each(function () {
    var output = "<ul><li>" + this.firstName + " " + this.lastName + "--" + this.joined.month + "</li></ul>";
    $('#placeholder').append(output);
});
$('#search').keyup(function () {
    var yourtext = $(this).val();
    if (yourtext.length > 0) {
        $("li:not(:contains(" + yourtext + "))").hide();
    }
    else{
        
        $("li").show();
    }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="search" name="search" id="search" value="" />
<div id="placeholder"></div>

Up Dated 2

var data = {
    "users": [{
        "firstName": "Ray",
            "lastName": "Villalobos",
            "joined": {
            "month": "January",
                "day": 12,
                "year": 2012
        }
    }, {
        "firstName": "John",
            "lastName": "Jones",
            "joined": {
            "month": "April",
                "day": 28,
                "year": 2010
        }
    }]
}

$(data.users).each(function () {
    var output = "<ul><li>" + this.firstName + " " + this.lastName + "--" + this.joined.month + "</li></ul>";
    $('#placeholder').append(output);
});
$('#search').keyup(function () {
    var yourtext = $(this).val();
    if (yourtext.length > 0) {
        var abc = $("li").filter(function () {
            var str = $(this).text();
            var re = new RegExp(yourtext, "i");
            var result = re.test(str);
            if (!result) {
                return $(this);
            }
        }).hide();
    } else {
        $("li").show();
    }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="search" name="search" id="search" value="" />
<div id="placeholder"></div>

use $.grep

See this example: http://jsfiddle/kevalbhatt18/ejPV4/317/

var data={"users":[
        {
            "firstName":"Ray",
            "lastName":"Villalobos",
            "joined": {
                "month":"January",
                "day":12,
                "year":2012
            }
        },
        {
            "firstName":"John",
            "lastName":"Jones",
            "joined": {
                "month":"April",
                "day":28,
                "year":2010
            }
        }
]}

var found_names = $.grep(data.users, function(v) {
    return v.firstName === "John" ;
});

console.log(found_names);

Edit

see this fiddle with key press event.

http://jsfiddle/kevalbhatt18/ejPV4/320/