jquery-ui 输入提示demo

  记录一下工作中点滴,将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