 
/* 
* 功能:該js文件中的代碼實現(xiàn)了[輸入自動搜索提示]功能,如百度、google搜索框中輸入一些字符會以下拉列表形式給出一些提示，提高了用戶體驗； 
* 使用技術(shù):JQuery+Ajax 
* 
* 一、如何使用該功能? 
* 1.使用該功能是需引入以下文件: 
* 1)<link type="text/css" rel="stylesheet" href="<%=baseURL %>/appName/css/common/suggestion.css"/> 
* 2)<script type="text/javascript" src="<%=baseURL %>/appName/js/common/jquery-1.9.1.js"></script> 
* 3)<script type="text/javascript" src="<%=baseURL %>/appName/js/common/suggestion.js"></script> 
* 2.需要在文件中添加標(biāo)簽如下所示: 
* <input type="text" id="keywords_input" autocomplete="off" searchURL="<%=baseURL%>/appName/sug/getSug.spring"> 
* <div id="sug_layer_div"></div> 
* 說明: 
* 1).在使用該功能的頁面引入該文件,同時該功能使用了jQuery技術(shù),依賴于jQuery文件,要在引入suggestion.js之前引入jQuery文件; 
* 2).這里假定你需要使用該功能的文本輸入框為:<input type="text">; 
* 3).為該input標(biāo)簽指定id為'keywords_input',如<input type="text" id="keywords_input">; 
* 4).為該input標(biāo)簽指定autocomplete為'off',如<input type="text" autocomplete="off">; 
* 5).為該input標(biāo)簽添加自定義屬性searchURL,該屬性的值為需要調(diào)用控制器方法的URL,如需要調(diào)用sugController控制器的getSug方法來返回搜索提示數(shù)據(jù),則 
* <input type="text" searchURL="<%=baseURL%>/appName/sug/getSug.spring"> 
* (這里使用Spring MVC框架); 
* 6).在input標(biāo)簽下面加一個id為'sug_layer_div'的DIV標(biāo)簽,如<div id="sug_layer_div"></div> 
* 
* 3.請求-響應(yīng)數(shù)據(jù)格式說明:(json數(shù)據(jù)格式) 
* 1)前端示例: 
$.ajax({ 
type:"GET", //AJAX提交方式為GET提交 
dataType:"json", 
url:$("#keywords_input").attr("searchURL"),//處理頁面的URL地址 
data:{ //要傳遞的參數(shù) 
"keywords_input":escape($("#keywords_input").val()) 
}, 
success:function(data) { 
var result = data.sugList;;//前端需要的數(shù)據(jù) 
...... 
} 
}); 
* 2)后臺示例: 
@Controller 
@RequestMapping("/el/sug") 
@SuppressWarnings({"rawtypes","unchecked"}) 
public class SugController extends ElBaseController{ 
@RequestMapping("getSug") 
public void getSuggestion (HttpServletRequest request ,HttpServletResponse response)throws JSONException { 
log.info("<------獲取搜索提示數(shù)據(jù)---SugController.getSuggestion--------->"); 
JSONObject json = new JSONObject(); 
String errMsg = ""; 
List sugList = new LinkedList<String>(); 
try { 
String keyword = request.getParameter("keywords_input");//前端傳來的數(shù)據(jù)(輸入框中的數(shù)據(jù)) 
List sugList = SugService.getSuggestionList(keywords_input); 

}catch (Exception e) { 
errMsg = "獲取數(shù)據(jù)時出現(xiàn)異常,"+e.getMessage(); 
json.put("codeid","FAILURE"); 
} 
json.put("sugList",sugList);//要響應(yīng)前端的數(shù)據(jù) 
ajaxResultText(response,json.toString()); 
} 
* 
* 二、如何了解該功能的實現(xiàn)? 
* 閱讀本文件的代碼，你應(yīng)了解以下一些基礎(chǔ)知識： 
* 1.keyUp,keyDown等事件中一些鍵碼對: 
* 按鍵 鍵碼 | 按鍵 鍵碼| 按鍵鍵碼 
* 0 48 9 57 0(數(shù)字鍵盤)96 
* A 65 Z 90 9(數(shù)字鍵盤)105 
* BackSpace 8 Up-Arrow 38 Dw-Arrow40 
* 
* 2.JavaScript escape()函數(shù) 
* escape()函數(shù)可對字符串進(jìn)行編碼，這樣就可以在所有的計算機(jī)上讀取該字符串 
* 該方法不會對 ASCII字母和數(shù)字進(jìn)行編碼，也不會對下面這些 ASCII標(biāo)點符號進(jìn)行編碼： * @ - _ + . / 。 
* 其他所有的字符都會被轉(zhuǎn)義序列替換。如:escape("?!=()#%&") --> %3F%21%3D%28%29%23%25%26 
* 
* 3.autocomplete屬性規(guī)定輸入字段是否應(yīng)該啟用自動完成功能。 自動完成允許瀏覽器預(yù)測對字段的輸入。 
* 當(dāng)用戶在字段開始鍵入時，瀏覽器基于之前鍵入過的值，應(yīng)該顯示出在字段中填寫的選項。把該autocomplete屬性值設(shè)為'off', 
* 就是要關(guān)閉瀏覽器自帶的輸入提示功能 
* 注釋：autocomplete屬性適用于<form>，以及下面的 
* <input>類型：text,search,url,telephone,email,password,datepickers,range以及 color。 
* 
* Author:sunfei(孫飛) Date:2013.08.21 
* 
*/ 