通讯录已经成为app的一种基本功能，将中文汉字按照一定顺序排序（一般为第一个汉字的首字母从A到Z顺序排序）。

以下部分使用小茗同学的转化方案：
github链接：https://github.com/sxei/pinyinjs/
demo示例：http://demo.haoji.me/pinyinjs/?from=xa
博客链接：【干货】JS版汉字与拼音互转终极方案，附简单的JS拼音输入法

测试demo

首先，根据原demo测试，发现当前需要的效果实际更简单，只需要获取到汉字的首字母即可。故，第一步写一个简单的demo，测试是否可以获取字符串为汉字时的首字母。
代码如下：

<!doctype html5>
<html><head><style></style><script src="pinyin_dict_firstletter.js"></script><script src="pinyinUtil.js"></script>
</head>
<body><input type="text" id="name"/><p  id="result"></p><script>var result = document.getElementById('result');var ip = document.getElementById('name');ip.addEventListener('input',function(){result.innerHTML=pinyinUtil.getFirstLetter(ip.value); // 输出 XMTX},false);</script>
</body>
</html>

效果如下：
- 事件为input

- 若将事件改为blur

-若将事件改为keydown

-若将事件改为keypress

-若将事件改为change

区别：

事件	定义	具体表现形式
input	input的value发生变化时就会发生，无论是键盘输入还是鼠标粘贴的改变都能即时监听到	实时获取键盘输入字符，输入完毕后直接触发事件
blur	丢失焦点触发	不实时获取输入，输入完毕后，输入框丢失焦点触发事件
keydown	按钮被按下触发	实时获取键盘输入字符，输入完毕后需输入enter才能触发
keypress	触发：按键被按下／按键被松开	不实时获取键盘输入字符，输入完毕后需输入enter才能触发
change	用户改变域的容时触发	效果略同blur
propertychange	功能同oninput，用以替代oninput在IE9以下的不兼容性

因此，在许多jquery的监听输入中，可见事件”input propertychange”，如：

$(function(){ $('#username').bind('input propertychange', function() {  $('#result').html($(this).val().length + ' characters');  });
})

通讯录简易实现

按照A-Z顺序排列通讯录姓名即可。
代码如下：

<!doctype html5>
<html><head><style></style><script src="pinyin_dict_firstletter.js"></script><script src="pinyinUtil.js"></script>
</head>
<body><ul id="result"></ul><script>var result = document.getElementById('result');var arrName=["何三","黄四","李五","陈心","邱久久"],sortedName={};var str="ABCDEFGHIJKLMNOPQRSTUVWXYZ",strArr=str.split("");for(var val of arrName){var ch = pinyinUtil.getFirstLetter(val).charAt(0);if(sortedName[ch]){sortedName[ch].push(val);}else{sortedName[ch]=[val];}}//sortfor(var val of strArr){if(sortedName[val]){var str = val+":"+sortedName[val].toString();var temp = document.createElement('li');temp.innerHTML = str;result.append(temp);}}</script>
</body>
</html>

效果如下：

css效果暂时省略。

出现的问题

js变量命名注意不要使用关键字，如name，否则报错很莫名其妙。

[web效果实现－3] 拼音排序通讯录实现相关推荐

Java字母笔顺_Android实现中文汉字笔划(笔画)、中文拼音排序、英文排序
一.需求描述最近要做一个类似微信的,在登录界面选择国家地区的功能,微信有中文汉字笔画排序以及中文拼音排序等几种方式,如下所示: 微信:简体中文.拼音排序微信:繁体中文.笔画排序微信英文字母排 ...
Android实现中文汉字笔划(笔画)、中文拼音排序、英文排序
发布时间:2018-11-16 技术:Android 概述最近要做一个类似微信的,在登录界面选择国家地区的功能,微信有中文汉字笔画排序以及中文拼音排序等几种方式,如下所示: 简体中文拼音排序;繁体 ...
将iPhone的通讯录以拼音排序(转载文章)
py.php < ?php /** * @desc 将iPhone的通讯录以拼音排序, 需要安装PHP * @author Kafeifei * @version 0.1beta */ erro ...
手机通讯录java首字母排序,Android联系人按拼音排序以及按汉字首字母或全拼搜索...
今天用了整整一下午去捣鼓这块,为什么模拟器上可以按拼音排序,中英文混排,及按字母搜索联系人,但到了开发板(平台是根据android2.2改过的)上就怎么不行了呢,虽然现在还没有解决,但也是知道了问题所 ...
android中文首字母排序,Android上汉字按拼音排序如何实现？
具体的代码在 packages\providers\contactsprovider\src\com\android\providers\contacts\ContactL ocaleUtils.ja ...
ElasticSearch 2.4.X实现中文拼音排序
前言最近接到一个需求,要求实现搜索框的搜索结果可以按照中文排序,本人灵机一动,那不很简单吗,直接按照es自带的sort功能处理下不就行了吗?两分钟的代码量,半天的喝茶时间,白赚半天的故事点,嘿嘿. ...
Java汉字按照拼音排序
最近项目上使用到汉字排序的问题,网上搜索了一下后普遍使用下面的方法比较. @Test public void test_sort_pinyin() { Collator cmp = Collator. ...
【我的Android进阶之旅】Android实现中文汉字笔划(笔画)排序、中文拼音排序、英文排序的国家地区选择界面
一.需求描述最近要做一个类似微信的,在登录界面选择国家地区的功能,微信有中文汉字笔画排序以及中文拼音排序等几种方式,如下所示: 微信:简体中文.拼音排序微信:繁体中文.笔画排序微信英文字母排 ...
mysql根据中文拼音分组_【改进篇】使用MySql实现好友昵称按拼音排序或分组
昵称排序顺序要求大小写英文字母排序排在前面中文按拼音排序数字,符号以及emoji符号后来发现原来的思路是有问题的,参与拼音排序的就只有中文,英文是没有参与排序的,原来的效果: 昵称 Apple ...

[web效果实现－3] 拼音排序通讯录实现

测试demo

通讯录简易实现

出现的问题

[web效果实现－3] 拼音排序通讯录实现相关推荐

最新文章

热门文章