? 記錄一下工作中點滴,將jquery-ui autocomplete+springmvc+mybatis+oracle 實現輸入提示的demo 與大家共享一下.
? 具備功能：
? 1)支持中文，英文，數字 輸入提示
? 2)支持按中文首字母提示

? js
?

    
/**
 * 輸入提示
 * @param $searchInput 查詢條件input
 * @param url 查詢匹配內容的server url
 */
function onAutocomplete($searchInput , url)
{
	 
	$searchInput.autocomplete
	 ({
		source:function(val,parse)
		{
			//獲得查詢內容
			var searchKeyWord = $.trim(val.term) ;
			if(isNull(searchKeyWord)){
				return ;
			}
			
			//判斷查詢內容是否為英文
			var isEn = searchKeyWord.isEn() ;
			
            $.ajax({
                url:url,
                data:{caseName:$searchInput.val(),isEn:isEn},
                dataType:'json',
                success:function(r){
                    parse(r);
                }
            });
	    } 
	 });	
}

/**
 * 輸入提示
 * 默認在name為‘searchKeyword’ input元素上添加提示功能
 * @param url 查詢匹配內容的server url
 */
function onDefaultAutocomplete(url)
{
	var $searchInput = $("input[name='searchKeyword']") ;
	onAutocomplete($searchInput , url);
}

/*
 * 是否為英文
 * 
 */
String.prototype.isEn = function(){
	var reg=/^[a-zA-Z]*$/gi;
	
	if(reg.test(this))
		return true ;
	
	return false;
};

  
  

? controller
?

    
@RequestMapping("searchHelp")
	@ResponseBody
	public List<String> searchHelp(@RequestParam(value = "caseName") String caseName,
			@RequestParam(value = "isEn") boolean isEn) throws InterruptedException{
		String userID = PsaspUtils.getLoginUser().getId();
		return this.caseInfoService.getCaseNamesByUserId(caseName,userID,isEn);
	}

  
  

? service 略
? dao
?

    
public List<String> getCaseNamesByUserId(String name ,String userID,boolean isEn) {
		Map<String, Object> map=new HashMap<String, Object>();
		map.put("userID", userID);
		map.put("isEn", isEn);
		if(StringUtils.isNotBlank(name))
		{
			map.put("name", "%"+name+"%");
		}
		return getSqlSession().selectList(getGlobalSqlId("getCaseNamesByUserId"),map);
	}
  
  

? sqlmapper
?

    
   <select id="getCaseNamesByUserId" parameterType="map" resultType="String">
	 SELECT CI.NAME FROM CASE_INFO CI RIGHT JOIN CDB_SCHEME CS ON CI.SCHEME_ID = CS.ID
	 WHERE ( CI.USER_ID = #{userID} OR (CI.USER_ID != #{userID} AND CI.IS_SHARE = 1))
	  <if test="name != null">
	     <choose>
	        <when test="isEn">
	       	 	AND UPPER(F_PINYIN(CI.NAME)) LIKE '%'||UPPER(#{name})||'%'
	        </when>
	        <otherwise>
	        	AND CI.NAME like #{name}
	        </otherwise>

	     </choose>
		 
	  </if>
	
	</select>
  
  

? oracle 函數
?

    
  CREATE OR REPLACE FUNCTION F_PINYIN(P_NAME IN VARCHAR2) RETURN VARCHAR2 AS
     V_COMPARE VARCHAR2(100);
     V_RETURN VARCHAR2(4000);

     FUNCTION F_NLSSORT(P_WORD IN VARCHAR2) RETURN VARCHAR2 AS
     BEGIN
      RETURN NLSSORT(P_WORD, 'NLS_SORT=SCHINESE_PINYIN_M');
     END;
    BEGIN

    FOR I IN 1..NVL(LENGTH(P_NAME), 0) LOOP
     V_COMPARE := F_NLSSORT(SUBSTR(P_NAME, I, 1));
     IF V_COMPARE >= F_NLSSORT('吖') AND V_COMPARE <= F_NLSSORT('驁') THEN
      V_RETURN := V_RETURN || 'A';
     ELSIF V_COMPARE >= F_NLSSORT('八') AND V_COMPARE <= F_NLSSORT('簿') THEN
      V_RETURN := V_RETURN || 'B';
     ELSIF V_COMPARE >= F_NLSSORT('嚓') AND V_COMPARE <= F_NLSSORT('錯') THEN
      V_RETURN := V_RETURN || 'C';
     ELSIF V_COMPARE >= F_NLSSORT('咑') AND V_COMPARE <= F_NLSSORT('鵽') THEN
      V_RETURN := V_RETURN || 'D';
     ELSIF V_COMPARE >= F_NLSSORT('妸') AND V_COMPARE <= F_NLSSORT('樲') THEN
      V_RETURN := V_RETURN || 'E';
     ELSIF V_COMPARE >= F_NLSSORT('發') AND V_COMPARE <= F_NLSSORT('猤') THEN
      V_RETURN := V_RETURN || 'F';
     ELSIF V_COMPARE >= F_NLSSORT('旮') AND V_COMPARE <= F_NLSSORT('腂') THEN
      V_RETURN := V_RETURN || 'G';
     ELSIF V_COMPARE >= F_NLSSORT('妎') AND V_COMPARE <= F_NLSSORT('夻') THEN
      V_RETURN := V_RETURN || 'H';
     ELSIF V_COMPARE >= F_NLSSORT('丌') AND V_COMPARE <= F_NLSSORT('攈') THEN
      V_RETURN := V_RETURN || 'J';
     ELSIF V_COMPARE >= F_NLSSORT('咔') AND V_COMPARE <= F_NLSSORT('穒') THEN
      V_RETURN := V_RETURN || 'K';
     ELSIF V_COMPARE >= F_NLSSORT('垃') AND V_COMPARE <= F_NLSSORT('擽') THEN
      V_RETURN := V_RETURN || 'L';
     ELSIF V_COMPARE >= F_NLSSORT('嘸') AND V_COMPARE <= F_NLSSORT('椧') THEN
      V_RETURN := V_RETURN || 'M';
     ELSIF V_COMPARE >= F_NLSSORT('拏') AND V_COMPARE <= F_NLSSORT('瘧') THEN
      V_RETURN := V_RETURN || 'N';
     ELSIF V_COMPARE >= F_NLSSORT('筽') AND V_COMPARE <= F_NLSSORT('漚') THEN
      V_RETURN := V_RETURN || 'O';
     ELSIF V_COMPARE >= F_NLSSORT('妑') AND V_COMPARE <= F_NLSSORT('曝') THEN
      V_RETURN := V_RETURN || 'P';
     ELSIF V_COMPARE >= F_NLSSORT('七') AND V_COMPARE <= F_NLSSORT('裠') THEN
      V_RETURN := V_RETURN || 'Q';
     ELSIF V_COMPARE >= F_NLSSORT('亽') AND V_COMPARE <= F_NLSSORT('鶸') THEN
      V_RETURN := V_RETURN || 'R';
     ELSIF V_COMPARE >= F_NLSSORT('仨') AND V_COMPARE <= F_NLSSORT('蜶') THEN
      V_RETURN := V_RETURN || 'S';
     ELSIF V_COMPARE >= F_NLSSORT('侤') AND V_COMPARE <= F_NLSSORT('籜') THEN
      V_RETURN := V_RETURN || 'T';
     ELSIF V_COMPARE >= F_NLSSORT('屲') AND V_COMPARE <= F_NLSSORT('鶩') THEN
      V_RETURN := V_RETURN || 'W';
     ELSIF V_COMPARE >= F_NLSSORT('夕') AND V_COMPARE <= F_NLSSORT('鑂') THEN
      V_RETURN := V_RETURN || 'X';
     ELSIF V_COMPARE >= F_NLSSORT('丫') AND V_COMPARE <= F_NLSSORT('韻') THEN
      V_RETURN := V_RETURN || 'Y';
     ELSIF V_COMPARE >= F_NLSSORT('帀') AND V_COMPARE <= F_NLSSORT('咗') THEN
      V_RETURN := V_RETURN || 'Z';
     END IF;
    END LOOP;
    IF V_RETURN is not null THEN
       RETURN V_RETURN;
    ELSE
       RETURN P_NAME ;
    END IF ;
   END;
   
  
  

? 使用方法
?

    

 $(function(){
     onDefaultAutocomplete("<c:url value='/lfc/mode/searchHelp' />");
   })

  
  

? 效果圖
?


?
? F_PINYIN
? 略有修改

jquery-ui 輸入提示demo