json字母顺序和输入框过滤完整列表

Question

我有一个 json 列表，但我想按字母顺序制作它，我只想加载 1 个元素并给用户一个输入框，这样当用户点击时显示完整的 json 列表。

我试过了，但我卡住了我对 jquery 不太熟悉，如果你们能提供帮助，我将不胜感激。

html代码：

<!--first page -->
<div data-role="page" id="info-page">
    <div data-role="header" data-theme="b">
         <h1> Information</h1>

    </div>
    <div data-role="content">
        <ul data-role="listview" id="prof-list" data-divider-theme="a" data-inset="true">
            <li data-role="list-divider" data-transition="flow" data-theme="b" role="heading">Users</li>
        </ul>
    </div>
</div>
<!--second page -->
<div data-role="page" id="details-page">
    <div data-role="header" data-theme="b"><a href="#" data-rel="back" data-role="button">Go back</a>

         <h1>Employee Details</h1>

    </div>
    <div data-role="content"></div>
</div>

js代码：

$(document).on("pageinit", "#info-page", function () {



    var li = "";

    $.each(info, function (i, name) {

        li += '<li><a href="#" id="' + i + '" class="info-go">' + name.name + '</a></li>';

    });

    $("#prof-list").append(li).promise().done(function () {

        $(this).on("click", ".info-go", function (e) {
            e.preventDefault();

            $("#details-page").data("info", info[this.id]);

            $.mobile.changePage("#details-page");
        });


        $(this).listview("refresh");
    });
});


$(document).on("pagebeforeshow", "#details-page", function () {

    var info = $(this).data("info");

    var info_view = "";

    for (var key in info) {

        info_view += '<div class="ui-grid-a"><div class="ui-block-a"><div class="ui-bar field" style="font-weight : bold; text-align: left;">' + key + '</div></div><div class="ui-block-b"><div class="ui-bar value" style="width : 75%">' + info[key] + '</div></div></div>';
    }

    $(this).find("[data-role=content]").html(info_view);
});

var info = [{

        "age": 11,
        "name": "Douglas",
        "gender": "male"
 }, {     

        "age": 12,
        "name": "Pat",
        "gender": "male"

}, {

        "age": 27,
        "name": "Juan",
        "gender": "male"

}, {

        "age": 17,
        "name": "Cris",
        "gender": "female"

}, {

        "age": 19,
        "name": "nicky",
        "gender": "female"

}, {

        "age": 55,
        "name": "Mags",
        "gender": "female"

}];

完整代码在：

http://jsfiddle.net/8uac7/2474/

Answer 1

如果你想按字母顺序排列列表，你可以使用这样的排序功能

info.sort(function(a, b){return a.name.localeCompare(b.name);});

在执行 $.each 之前放置它

$.each(info, function (i, name) {

如果我碰巧有一些空闲时间，我会检查输入框的事情并回复你

问候， 丹