|
|
忙里偷闲，想弄个像google那样输入中文或拼音下面就自动匹配出来的功能。现已实现，虽然遥不可及google的强大，但稍微还是可以满足一下我这个市井混混了。
我是按照neverModules-autoComplete.js来做的，也小改了下JS里面的对我来说不需要的代码。整个与服务器的交互是用DWR来实现的。
思路：本来neverModules-autoComplete没有按拼音匹配的功能，于是我就用pinyin4j来把中文转换为拼音或者首字母，将拼音字符串隐藏在中文的后面。这样既可输入中文也可输入拼音来匹配了。
实现效果如图： 见附件吧，不能插入图片。
遗留问题：关于多音字也是个让程序员头疼的问题，我测试时“长盛基金”，拼音应该为chang sheng ji jin,没想到pinyin4j转换的是zhang sheng ji jin. 于是我就用google的中文翻译看了下里面的拼音，也是zhang三声，NND。真是郁闷。有网友说pinyin4j-2.5.0支持多音字了，我就纳闷到底哪里支持了，好像也不行哦。
如果有人知道咋解决多音字问题，麻烦跟小弟说声，感激不尽...................
*项目例子见附件，是在eclipse下建的web工程，解压到eclipse工作空间，然后导入就行了。
//----------------------------------------pinyin4j-------------------------------------------//
Pinyin.java
package org.cpic.pinyin;import net.sourceforge.pinyin4j.PinyinHelper;import net.sourceforge.pinyin4j.format.HanyuPinyinCaseType;import net.sourceforge.pinyin4j.format.HanyuPinyinOutputFormat;import net.sourceforge.pinyin4j.format.HanyuPinyinToneType;import net.sourceforge.pinyin4j.format.HanyuPinyinVCharType;import net.sourceforge.pinyin4j.format.exception.BadHanyuPinyinOutputFormatCombination;public class Pinyin {/** * 将汉字转换为全拼 * * @param src * @return String */public static String getPinYin(String src) {/* * 解释一下代码: (1).HanyuPinyinOutputFormat,定义汉语拼音的输出形式. * * (2).HanyuPinyinCaseType,定义汉语拼音的大小写,如: LOWERCASE min2 UPPERCASE MIN2 * * (3).HanyuPinyinToneType,定义音调的显示方式.如: WITH_TONE_MARK dǎ ,带音调 * WITH_TONE_NUMBER da3 ,带音调,用12345表示平上去入和轻声 WITHOUT_TONE da ,不带音调 * * (4).HanyuPinyinVCharType,定义'ü' 的显示方式.如: WITH_U_AND_COLON u: * ,u加两点表示,如律师表示为lu:shi WITH_V v ,用字母v表示,这个用搜狗输入法的人想必有些印象. * WITH_U_UNICODE ü * * (5).input).matches("[\\u4E00-\\u9FA5]+"),这个用来判断是否为中文的. * * (6).PinyinHelper.toHanyuPinyinStringArray(input, * format),这个返回单字的拼音字符串数组. * 如果音调类型为WITH_TONE_NUMBER的话,"张",将返回"zhang1","李",会返回"li4". * */char[] t1 = null;t1 = src.toCharArray();// System.out.println(t1.length);String[] t2 = new String[t1.length];// System.out.println(t2.length);// 设置汉字拼音输出的格式HanyuPinyinOutputFormat t3 = new HanyuPinyinOutputFormat();t3.setCaseType(HanyuPinyinCaseType.LOWERCASE);t3.setToneType(HanyuPinyinToneType.WITHOUT_TONE);t3.setVCharType(HanyuPinyinVCharType.WITH_V);String t4 = "";int t0 = t1.length;try {for (int i = 0; i < t0; i++) {// 判断能否为汉字字符// System.out.println(t1);if (Character.toString(t1).matches("[\\u4E00-\\u9FA5]+")) {t2 = PinyinHelper.toHanyuPinyinStringArray(t1, t3);// 将汉字的几种全拼都存到t2数组中t4 += t2[0];// 取出该汉字全拼的第一种读音并连接到字符串t4后} else {// 如果不是汉字字符，间接取出字符并连接到字符串t4后t4 += Character.toString(t1);}}} catch (BadHanyuPinyinOutputFormatCombination e) {// TODO Auto-generated catch blocke.printStackTrace();}return t4;}/** * 提取每个汉字的首字母 * * @param str * @return String */public static String getPinYinHeadChar(String str) {String convert = "";for (int j = 0; j < str.length(); j++) {char word = str.charAt(j);// 提取汉字的首字母String[] pinyinArray = PinyinHelper.toHanyuPinyinStringArray(word);if (pinyinArray != null) {convert += pinyinArray[0].charAt(0);} else {convert += word;}}return convert.toUpperCase();}/** * 将字符串转换成ASCII码 * * @param cnStr * @return String */public static String getCnASCII(String cnStr) {StringBuffer strBuf = new StringBuffer();// 将字符串转换成字节序列byte[] bGBK = cnStr.getBytes();for (int i = 0; i < bGBK.length; i++) {// System.out.println(Integer.toHexString(bGBK & 0xff));// 将每个字符转换成ASCII码strBuf.append(Integer.toHexString(bGBK & 0xff));}return strBuf.toString();}public static void main(String[] args) {String cnStr = "长盛不衰";System.out.println(getPinYin(cnStr));System.out.println(getPinYinHeadChar(cnStr));System.out.println(getCnASCII(cnStr));}}
//----------------------------------------------neverModules-autoComplete块-------------------------------//
代码：
hello.jsp
<%@ page language="java" pageEncoding="gbk"%><html> <head> <title>My JSP 'Hello.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <link rel="stylesheet" href="<%=request.getContextPath()%>/include/css/autocomplete.css" type="text/css"> <script type="text/javascript" src="<%=request.getContextPath()%>/include/js/neverModules-autoComplete.js"></script> <script type='text/javascript' src='t/interface/SHello.js'></script> <script type='text/javascript' src='t/engine.js'></script> <script type='text/javascript' src='t/util.js'></script> <script type="text/javascript"> //<![CDATA[ var completeDataSource= [ //对象数组 { 'text':'',//文本对象,左边显示内容 'content':'',//文本对象,右边显示内容 'hints':'',//提示对象 'hiddenText':''//隐藏拼音 } ]; function onLoadBankCode(){ //返回的是一个List集合，里面封装多个MAP对象 SHello.getBankcode(getList); } function getList(data){ //其中date接收方法的返回值 for(var property in data){ var bean = data[property]; //alert("text="+bean.text+" content="+bean.content); completeDataSource[property]=bean; //alert(completeDataSource[property].text); } } var autoComplete = null; onload = function pageLoadHdle(){ var configuration = { instanceName: "autoComplete", textbox: document.getElementById("bankNo"), dataSource:completeDataSource }; autoComplete = new neverModules.modules.autocomplete(configuration); autoComplete.callback = function (autocompleteValue, autocompleteContent) { document.getElementById("bankNo").value=autocompleteValue; } autoComplete.useContent = true;autoComplete.useSpaceMatch = true;autoComplete.ignoreWhere = true; autoComplete.create(); autoComplete.expandAllItem(); autoComplete.showAnimateImage("<%=request.getContextPath()%>/include/img/animated_loading.gif");window.setTimeout( function closeAnimateImageAfter1seconds() { autoComplete.closeAnimateImage(); }, 5000 );//设置图片消失时间为5秒 } //]]> </script> <script type='text/javascript'> function sendMessage() { var tx=document.getElementById("username").value; SHello.SayHello(tx,aa); } function aa(data) { document.getElementById("show").innerHTML=data; } </script> </head> <body> 请输入您的名字<input id="username" name="username" type="text"/><br><input type="button" value="发送简单请求" />下面是服务器的回应:<br><div id= "show"></div><p>--------------------------------------------------------<br>请输入拼音首字母或中文名称(pasx or 平安寿险):<br><p><input type='text' name="bankNo" maxlength="25" size="25" onkeyup="autoComplete.hdleEvent(event)" ondblclick="autoComplete.expandAllItem();" onmouseout="autoComplete.closeAnimateImage()" /> </body></html>
Hello.java
package org.cpic.autocomplete;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import org.cpic.pinyin.Pinyin;public class Hello {public String SayHello(String name) {return "Say Hello:"+name;}/** * 加载客户名称，格式：平安寿险(PASX) * * @return * @throws Exception */public List getBankcode() throws Exception {List<String> list=new ArrayList<String>();list.add("平安寿险");list.add("养老险");list.add("太平洋人寿");list.add("安华夏人寿");list.add("英大泰和人寿");list.add("长盛基金");list.add("平安健康险");list.add("君龙人寿");List<Map> array=new ArrayList<Map>();for(int i=0;i<list.size();i++){Map<String,String> map=new HashMap<String,String>();map.put("text", list.get(i));//左边显示内容//map.put("content", list.get(i)+"("+Pinyin.getPinYinHeadChar(list.get(i))+")");//右边显示内容//map.put("hints", list.get(i)+"("+Pinyin.getPinYinHeadChar(list.get(i))+")");//提示//map.put("hiddenText", Pinyin.getPinYin(list.get(i)));//获取完整拼音map.put("hiddenText", Pinyin.getPinYinHeadChar(list.get(i)));//获取首字母拼音array.add(map);}return array;}}
|
|
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡