输入自动提示搜索提示功能的使用说明:sugggestion.txt
2024-05-06 14:36:08
供稿：网友
readme:
本文件记录了suggestion.js文件的功能使用说明:
代码如下:
/*
* 功能:该js文件中的代码实现了[输入自动搜索提示]功能,如百度、google搜索框中输入一些字符会以下拉列表形式给出一些提示，提高了用户体验；
* 使用技术: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.需要在文件中添加标签如下所示:
* <input type="text" id="keywords_input" autocomplete="off" searchURL="<%=baseURL%>/appName/sug/getSug.spring">
* <div id="sug_layer_div"></div>
* 说明:
* 1).在使用该功能的页面引入该文件,同时该功能使用了jQuery技术,依赖于jQuery文件,要在引入suggestion.js之前引入jQuery文件;
* 2).这里假定你需要使用该功能的文本输入框为:<input type="text">;
* 3).为该input标签指定id为'keywords_input',如<input type="text" id="keywords_input">;
* 4).为该input标签指定autocomplete为'off',如<input type="text" autocomplete="off">;
* 5).为该input标签添加自定义属性searchURL,该属性的值为需要调用控制器方法的URL,如需要调用sugController控制器的getSug方法来返回搜索提示数据,则
* <input type="text" searchURL="<%=baseURL%>/appName/sug/getSug.spring">
* (这里使用Spring MVC框架);
* 6).在input标签下面加一个id为'sug_layer_div'的DIV标签,如<div id="sug_layer_div"></div>
*
* 3.请求-响应数据格式说明:(json数据格式)
* 1)前端示例:
$.ajax({
type:"GET", //AJAX提交方式为GET提交
dataType:"json",
url:$("#keywords_input").attr("searchURL"),//处理页面的URL地址
data:{ //要传递的参数
"keywords_input":escape($("#keywords_input").val())
},
success:function(data) {
var result = data.sugList;;//前端需要的数据
......
}
});
* 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("<------获取搜索提示数据---SugController.getSuggestion--------->");
JSONObject json = new JSONObject();
String errMsg = "";
List sugList = new LinkedList<String>();
try {
String keyword = request.getParameter("keywords_input");//前端传来的数据(输入框中的数据)
List sugList = SugService.getSuggestionList(keywords_input);
}catch (Exception e) {
