首字母检索手机通讯录模板

工作中需要用到类似于手机通讯录按首字母排序的列表，故而发现一些问题，在此记录下来：

问题一：在复制js文件里的strChineseFirstPY的内容时，复制不出来，不管是文件copy，还是内容copy，效果都是为空白，但是这空白又占据字符个数，然后就猜想到这里面的unicode码包含有某种特殊转义符，导致内容空白。所以通过字符串拼接的方法把该unicode码进行加起来，问题解决了。

问题二：把该插件用入到项目中，发现拼音为N开头的中文被排到默认里显示，即#列表显示，经过代码跟踪，发现是代码少了case:N的比较，加上即可。

2016-11-27 今天思考了一下，这些数据列表都是写死的，然后能不能通过动态加载数据显示出来呢？在项目中肯定是不可取的，于是动手尝试一下，思考过程中以为很复杂，写的时候才发现原来不是很难，只需要把数据包装到数组中，然后通过遍历动态生成dom结构，如下：

    var SortList=$(".sort_list");
    var SortBox=$(".sort_box");
    SortList.sort(asc_sort).appendTo('.sort_box');//按首字母排序
    function asc_sort(a, b) {
        return makePy($(b).find('.num_name').text().charAt(0))[0].toUpperCase() < makePy($(a).find('.num_name').text().charAt(0))[0].toUpperCase() ? 1 : -1;
    }

    var initials = [];
    var num=0;
    SortList.each(function(i) {
        var initial = makePy($(this).find('.num_name').text().charAt(0))[0].toUpperCase();
        if(initial>='A'&&initial<='Z'){
            if (initials.indexOf(initial) === -1)
                initials.push(initial);
        }else{
            num++;
        }
    });
    ...

SortList获取页面静态列表，只需要把这个列表改成动态获取，其他不变，如下：

    var chineseArr = [
            {"id":1,name:"涨水"},
            {"id":2,name:"美女"},
            {"id":3,name:"准备"},
            {"id":4,name:"请问"},
            {"id":5,name:"水电费"},
            {"id":6,name:"不能"},
            {"id":7,name:"更好"},
            {"id":8,name:"熬吧"},
            {"id":9,name:"凉快了"},
            {"id":10,name:"潍坊"},
            {"id":11,name:"拉屎"},
            {"id":12,name:"胸围"},
            {"id":13,name:"漂亮"},
            {"id":14,name:"离开"},
            {"id":15,name:"额无法"},
            {"id":16,name:"123"},
            {"id":17,name:"+sdkl"},
            {"id":18,name:"AB"}
            ];
    var SortBox=$(".sort_box");

    var html = [];
    for(var i = 0,len = chineseArr.length; i < len; i++){
        html += `<div class="sort_list">
                    <div class="num_name">${chineseArr[i].name}</div>
                </div>`;
    }
    var SortList=$(html);

    SortList.sort(asc_sort).appendTo('.sort_box');
    function asc_sort(a, b) {
        return makePy($(b).find('.num_name').text().charAt(0))[0].toUpperCase() < makePy($(a).find('.num_name').text().charAt(0))[0].toUpperCase() ? 1 : -1;
    }
    ...

效果和原来一样。（修改后的把头像去掉了）

往事，你好；往事，你孬；往事，再见。

msforest / notebook

首字母检索手机通讯录模板 #4