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;}; @RequestMapping("searchHelp")@ResponseBodypublic 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);} 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);} <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> 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' />"); }) 