Question

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

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.com/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.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/

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

2 个答案: