带有搜索输入的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);
});

这是小提琴 。

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/

---

编辑

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

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