运维开发网

输入自动提示搜索提示功能的使用说明:sugggestion.txt

运维开发网 https://www.qedev.com 2020-02-17 15:17 出处:网络 作者: 网络整理
该js文件中的代码实现了[输入自动搜索提示]功能,如百度、google搜索框中输入一些字符会以下拉列表形式给出一些提示,提高了用户体验
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) {

errMsg = "获取数据时出现异常,"+e.getMessage();

json.put("codeid","FAILURE");

}

json.put("sugList",sugList);//要响应前端的数据

ajaxResultText(response,json.toString());

}

*

* 二、如何了解该功能的实现?

* 阅读本文件的代码,你应了解以下一些基础知识:

* 1.keyUp,keyDown等事件中一些键码对:

* 按键 键码 | 按键 键码| 按键键码

* 0 48 9 57 0(数字键盘)96

* A 65 Z 90 9(数字键盘)105

* BackSpace 8 Up-Arrow 38 Dw-Arrow40

*

* 2.JavaScript escape()函数

* escape()函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串

* 该方法不会对 ASCII字母和数字进行编码,也不会对下面这些 ASCII标点符号进行编码: * @ - _ + . / 。

* 其他所有的字符都会被转义序列替换。如:escape("?!=()#%&") --> %3F%21%3D%28%29%23%25%26

*

* 3.autocomplete属性规定输入字段是否应该启用自动完成功能。 自动完成允许浏览器预测对字段的输入。

* 当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。把该autocomplete属性值设为'off',

* 就是要关闭浏览器自带的输入提示功能

* 注释:autocomplete属性适用于<form>,以及下面的

* <input>类型:text,search,url,telephone,email,password,datepickers,range以及 color。

*

* Author:sunfei(孙飞) Date:2013.08.21

*

*/

扫码领视频副本.gif

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号