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


Posted in Javascript onSeptember 02, 2013

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 
* 
*/
Javascript 相关文章推荐
jQuery实现数秒后自动提交form的方法
Mar 05 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
javascript每日必学之继承
Feb 23 Javascript
AngularJS 避繁就简的路由
Jul 01 Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
浅谈Vue.js中的v-on(事件处理)
Sep 05 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
js中let能否完全替代IIFE
Jun 15 Javascript
详解用js代码触发dom事件的实现方案
Jun 10 Javascript
OpenLayer学习之自定义测量控件
Sep 28 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
Sep 02 #Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 #Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 #Javascript
javascript模块化是什么及其优缺点介绍
Sep 02 #Javascript
火狐下table中创建form导致两个table之间出现空白
Sep 02 #Javascript
js的alert弹出框出现乱码解决方案
Sep 02 #Javascript
javascript中的window.location.search方法简介
Sep 02 #Javascript
You might like
php中++i 与 i++ 的区别
2012/08/08 PHP
PHP表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法
2013/01/06 PHP
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
2020/09/22 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
python根据出生日期获得年龄的方法
2015/03/31 Python
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
python实现批处理文件
2020/07/28 Python
python模块内置属性概念及实例
2021/02/18 Python
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
广告学专业毕业生自荐信
2013/09/24 职场文书
面试求职的个人自我评价
2013/11/16 职场文书
土木工程个人自荐信范文
2013/11/30 职场文书
售后服务经理岗位职责范本
2014/02/22 职场文书
个人贷款担保书
2014/04/01 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
2014年平安夜寄语
2014/12/08 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python