json按字母顺序排列和输入框来筛选完整列表

我有一个json列表，但我希望按字母顺序排列以及我只需加载一个元素并给用户一个输入框，以便当用户单击显示完整的json列表。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/

来源

2015-07-21 Raduken

如果您要订购的名单按字母顺序，您可以使用排序功能像这样

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

将它做$。每个

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

如果我碰巧有一些空闲时间我会检查输入框的事情，尽快给您

问候，丹之前

来源

2015-07-21 11:39:08

谢谢丹，完美的作品，让我知道你什么时候会有输入框的时候，我已经给了一些要点，谢谢。 – Raduken

json按字母顺序排列和输入框来筛选完整列表

回答

相关问题