输入自动提示搜索提示功能的使用说明: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 相关文章推荐
神奇的7个jQuery 3D插件整理
Jan 06 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
微信小程序 常用工具类详解及实例
Feb 15 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
vue快捷键与基础指令详解
Jun 01 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 Javascript
layui table 多行删除(id获取)的方法
Sep 12 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 Javascript
微信小程序自定义联系人弹窗
May 26 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 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
php 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
基于PHP对XML的操作详解
2013/06/07 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
DIV菜单层实现代码
2010/11/19 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
2015/04/16 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
2017/03/21 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
nodejs创建简易web服务器与文件读写的实例
2017/09/07 NodeJs
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
微信小程序实现文件预览
2020/10/22 Javascript
Python 字典dict使用介绍
2014/11/30 Python
Python性能优化技巧
2015/03/09 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
Python简单实现控制电脑的方法
2018/01/22 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
python实现名片管理器的示例代码
2019/12/17 Python
Python实现不规则图形填充的思路
2020/02/02 Python
python随机模块random使用方法详解
2020/02/14 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
IE9下html5初试小刀
2010/09/21 HTML / CSS
关于人生的感言
2014/01/17 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
离职报告范文
2014/11/04 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python