输入自动提示搜索提示功能的使用说明: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 相关文章推荐
使用insertAfter()方法在现有元素后添加一个新元素
May 28 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 Javascript
vue.js学习之UI组件开发教程
Jul 03 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
微信小程序progress组件使用详解
Jan 31 Javascript
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
JavaScript Array.flat()函数用法解析
Sep 02 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生成静态页面详解
2006/12/05 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
PHP实现的简单适配器模式示例
2017/06/22 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
javascript实现二叉树的代码
2017/06/08 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
解决vue-router中的query动态传参问题
2018/03/20 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
Python Paramiko模块的安装与使用详解
2016/11/18 Python
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
对Python中plt的画图函数详解
2018/11/07 Python
Python求离散序列导数的示例
2019/07/10 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
聊城大学毕业生自荐书
2014/02/01 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
学校春季防火方案
2014/06/08 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
授权委托书协议书
2014/10/16 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
使用Redis实现实时排行榜功能
2021/07/02 Redis