带有搜索输入的 jQuery Json 过滤器，不使用任何过滤器插件

Question

我可以在html 视图中显示Json 数据，但是当我在search 输入框中输入时，我现在如何根据firstname 显示filter json 数据列表，请帮助我，我是新手到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);
});

这里是fiddle。

Answer 1

你可以使用以下

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="search" name="search" id="search" value="" />
<div id="placeholder"></div>

更新日期

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="search" name="search" id="search" value="" />
<div id="placeholder"></div>

更新日期 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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="search" name="search" id="search" value="" />
<div id="placeholder"></div>

Answer 2

使用$.grep

看这个例子：http://jsfiddle.net/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);

---

编辑

看这个带有按键事件的小提琴。

http://jsfiddle.net/kevalbhatt18/ejPV4/320/