本文目录一览：
- 1、JS实现输入拼音搜索中文列表
- 2、边输入拼音边查找匹配的项目怎样实现
- 3、exjs, combox 如何设置默认值保存到数据库里
- 4、js动态添加input标签 easyui combox
- 5、javascript中文按照拼音首字母排序，如何实现？
- 6、急!!!Combox按拼音查询
JS实现输入拼音搜索中文列表
最近工作中接到了一个需求：一个项目列表，项目名称可能有中文可能有英文，如果是中文的话，需要实现用户输入项目的拼音即可筛选到对应项目的功能。
完成了之后觉得可以在公众号里给大家分享一下，给有需要的人一个参考吧。
项目框架用的是react，所以先creat-react-app
比如create-react-app pinyin
渲染选择框的组件用的是antd的Select组件，所以需要先引入antd，具体引入的方法参照antd官方文档，已经写得很清楚了
以上准备工作做好后，目前的目录结构应该如下图所示：
├── README.md
├── package.json
├── package-lock.json
├── config-overrides.js
├── public
│ ├── favicon.ico
│ ├──index.html
└── manifest.json
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├──logo.svg
│ └── registerServiceWorker.js
现在在src文件夹下新建一个components文件夹，components文件夹中新建一个SelectPinYin文件夹，SelectPinYin文件夹下新建一个index.js和PinYin.js
PinYin.js文件中主要放置拼音和各个拼音对应的中文字符串，方便组件调用
export const SimplePinYin = {
py: [
[ 'a','阿啊呵腌吖锕啊呵嗄啊呵啊呵阿啊呵' ],
[ 'ai','哀挨埃唉哎捱锿呆挨癌皑捱矮哎蔼霭嗳爱碍艾唉哎隘暧嗳瑷嗌嫒砹' ],
[ 'an','安谙鞍氨庵桉鹌厂俺铵揞埯案按暗岸黯胺犴' ],
[ 'ang','肮昂盎' ],
[ 'ao','熬凹熬敖嚣嗷鏖鳌翱獒聱螯廒遨袄拗媪奥澳傲懊坳拗骜岙鏊' ],
[ 'ba','八吧巴叭芭扒疤笆粑岜捌八拔跋茇菝魃把靶钯把爸罢霸坝耙灞鲅吧罢' ],
[ 'bai','掰白百摆伯柏佰捭败拜呗稗' ],
[ 'ban','般班搬斑颁扳瘢癍版板阪坂钣舨办半伴扮瓣拌绊' ],
[ 'bang','帮邦浜梆膀榜绑棒膀傍磅谤镑蚌蒡' ],
[ 'bao','包胞炮剥褒苞孢煲龅薄雹保宝饱堡葆褓鸨报暴抱爆鲍曝刨瀑豹趵' ],
[ 'bei','背悲杯碑卑陂埤萆鹎北被备背辈倍贝蓓惫悖狈焙邶钡孛碚褙鐾鞴臂呗' ],
...
]
}
内容太多，只能复制这样一小部分，其余部分可以参考下面这条链接，然后改成上面那种格式就可以了。
接下来开始写组件
要做到拼音搜索匹配到中文，所以调用this.selectPinYin函数，下面开始写selectPinYin函数
当input为中文时：
return option.props.children.toLowerCase().indexOf( input.toLowerCase() ) = 0;
当input为字母时：
const value = option.props.children.toLowerCase().split( '' );
const newValue = value.map( item = this.chineseChangePY( item ) ).join( '' );
return newValue.indexOf( input.toLowerCase() ) = 0;
思路：
① 将列表中的每项内容，即option.props.children转成小写（万一不全是中文），然后进行分割，split('')把字符串转成数组
② 遍历得到的数组，并把每一个元素传递给chineseChangePY函数
③ chineseChangePY函数的作用：如果元素不是中文，直接返回；如果是中文，遍历PinYin.js中的数组，与每个子数组的第二个元素即中文字符串对比，如果元素在这个中文字符串里，返回中文字符串所在数组的第一个元素，即所需要的拼音
④ 将处理过的数组转成字符串
⑤ 和input进行对比，存在返回true，不存在返回false
bug说明： 比如遇到生僻字的时候，PinYin.js中没有收录进这个中文，就无法匹配。比如遇到多音字的时候，“藏”：既可以cang也可以zang，cang排在zang前面，当遍历匹配的时候遇到cang就已经返回了，所以如果有用户输入zang就匹配不到藏字。
如果有更好的方法，欢迎讨论交流。
边输入拼音边查找匹配的项目怎样实现
用js响应输入框的变化，用ajax传回后台，后台jsp根据接收的字符，去数据库查找相关词句，再返回前台，ajax接收到jsp返回的代码后，显示在前台。
exjs, combox 如何设置默认值保存到数据库里
Composite root = new Composite("root");
root.Add(new Leaf("Leaf A"));
root.Add(new Leaf("Leaf B"));
Composite comp=new Composite("Composite X");
comp.Add(new Leaf("Leaf XA"));
comp.Add(new Leaf("Leaf XB"));
root.Add(comp);
js动态添加input标签 easyui combox
方法一：
1 var data, json;
2 json = '[{"id":"年计划","text":"年计划","selected":true}]';
3 data = $.parseJSON(json);
4 $("#rwlb").combobox("loadData", data);
方法二：
1 var data,json;
2 data = [];
3 data.push({ "text": "测试", "id": 100 });
4 $("#rwlb").combobox("loadData", data);
javascript中文按照拼音首字母排序，如何实现？
中文拼音排序一直都是很有趣的一个问题。推荐使用这个函数 String.prototype.localeCompare()，链接 MDN。首先用 localeCompare 试下拼音排序
var array = ['武汉', '北京', '上海', '天津'];
array.sort(
function compareFunction(param1, param2) {
return param1.localeCompare(param2);
}
);
array // ["北京", "上海", "天津", "武汉"]
然后根据 26 个英文字母分组排序，函数如下，
function pySegSort(arr) {
if(!String.prototype.localeCompare)
return null;
var letters = "*abcdefghjklmnopqrstwxyz".split('');
var zh = "阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀".split('');
var segs = [];
var curr;
letters.forEach(function(item,i){
curr = {letter: item, data:[]};
arr.forEach(function(item2){
if((!zh[i-1] || zh[i-1].localeCompare(item2) = 0) item2.localeCompare(zh[i]) == -1) {
curr.data.push(item2);
}
});
if(curr.data.length) {
segs.push(curr);
curr.data.sort(function(a,b){
return a.localeCompare(b);
});
}
});
return segs;
}
测试：
pySegSort(["我","不","懂","爱","啊","按","已","呀","选","县"])
结果：
[{"letter":"a","data":["啊","爱","按"]},{"letter":"b","data":["不"]},{"letter":"d","data":["懂"]},{"letter":"w","data":["我"]},{"letter":"x","data":["县","选"]},{"letter":"y","data":["呀","已"]}]
var arr = ["张三","李四","王五","阿三"];
document.write(arr+"");
arr.sort(function(a,b){
return a.localeCompare(b);
});
document.write(arr);
定义和用法：
用本地特定的顺序来比较两个字符串。
语法：
stringObject.localeCompare(target)
参数描述：
target 要以本地特定的顺序与 stringObject 进行比较的字符串。
返回值：
说明比较结果的数字。如果 stringObject 小于 target，则 localeCompare() 返回小于 0 的数。如果 stringObject 大于 target，则该方法返回大于 0 的数。如果两个字符串相等，或根据本地排序规则没有区别，该方法返回 0。
说明：
把 和 运算符应用到字符串时，它们只用字符的 Unicode 编码比较字符串，而不考虑当地的排序规则。以这种方法生成的顺序不一定是正确的。例如，在西班牙语中，其中字符 “ch” 通常作为出现在字母 “c” 和 “d” 之间的字符来排序。
localeCompare() 方法提供的比较字符串的方法，考虑了默认的本地排序规则。ECMAscript 标准并没有规定如何进行本地特定的比较操作，它只规定该函数采用底层操作系统提供的排序规则。
参考资料
百度知道.百度知道[引用时间2018-1-5]
急!!!Combox按拼音查询
告诉你个农民办法哦！
不过绝对可行！
用数据库！
三列:
id 简写 城市名
1 bj 北京
2 bd 保定
3 bt 包头
4 bh 北海
在窗体load的时候加载到某个全局数据集里面来！
每当combox文本改变的时候就去这个数据集里面找对应的就行了！
