Dwr+AutoComplete+pinyin4j 自動匹配（中文，拼音）

忙裏偷閒，想弄個像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[i]).matches("[\\u4E00-\\u9FA5]+"),這個用來判斷是否爲中文的.
		 * 
		 * (6).PinyinHelper.toHanyuPinyinStringArray(input[i],
		 * 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[i]);
				if (Character.toString(t1[i]).matches("[\\u4E00-\\u9FA5]+")) {
					t2 = PinyinHelper.toHanyuPinyinStringArray(t1[i], t3);// 將漢字的幾種全拼都存到t2數組中
					t4 += t2[0];// 取出該漢字全拼的第一種讀音並連接到字符串t4後
				} else {
					// 如果不是漢字字符，間接取出字符並連接到字符串t4後
					t4 += Character.toString(t1[i]);
				}
			}
		} catch (BadHanyuPinyinOutputFormatCombination e) {
			// TODO Auto-generated catch block
			e.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[i] & 0xff));
			// 將每個字符轉換成ASCII碼
			strBuf.append(Integer.toHexString(bGBK[i] & 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="發送簡單請求" οnclick="sendMessage();"/>


下面是服務器的迴應:<br>
<div id= "show"></div>
<p>--------------------------------------------------------
<br>請輸入拼音首字母或中文名稱(pasx or 平安壽險):<br>
<p><input type='text' name="bankNo" maxlength="25" size="25" οnkeyup="autoComplete.hdleEvent(event)" οndblclick="autoComplete.expandAllItem();" οnmοuseοver="autoComplete.showAnimateImage();" οnmοuseοut="autoComplete.closeAnimateImage()" οnclick="onLoadBankCode();"/>


  </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;

	}
}