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

 更新时间:2013年09月02日 18:24:09   作者:  
该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
*
*/

相关文章

  • JavaScript实现背景自动切换小案例

    JavaScript实现背景自动切换小案例

    这篇文章主要为大家详细介绍了JavaScript实现背景自动切换小案例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • 关于JS变量和作用域详解

    关于JS变量和作用域详解

    下面小编就为大家带来一篇关于JS变量和作用域详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 详解JavaScript的定时器

    详解JavaScript的定时器

    这篇文章主要为大家介绍了JavaScript的定时器 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • 盘点7个简单但棘手的JavaScript面试问题分析

    盘点7个简单但棘手的JavaScript面试问题分析

    这篇文章主要为大家介绍了盘点7个简单但棘手的JavaScript面试问题分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • Bootstrap实现水平排列的表单

    Bootstrap实现水平排列的表单

    这篇文章主要为大家详细介绍了Bootstrap实现水平排列的表单的相关代码,代码简洁,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • uniapp基础知识点掌握以及面试题整理

    uniapp基础知识点掌握以及面试题整理

    uni-app是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,下面这篇文章主要给大家介绍了关于uniapp基础知识点掌握以及面试题整理的相关资料,需要的朋友可以参考下
    2023-02-02
  • TypeScript创建一个简单Web应用

    TypeScript创建一个简单Web应用

    这篇文章主要为大家介绍了TypeScript创建一个简单Web应用,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-05-05
  • JS if else语句(条件判断语句)的详细使用

    JS if else语句(条件判断语句)的详细使用

    条件语句用于基于不同的条件来执行不同的动作,下面这篇文章主要给大家介绍了关于JS if else语句(条件判断语句)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • Bootstrap Table 在指定列中添加下拉框控件并获取所选值

    Bootstrap Table 在指定列中添加下拉框控件并获取所选值

    通过 bootstrap-table 的Column 配置项中的formatter,将获取到的数据转换为包含数据的 select 控件。然后根据用户选择项更新对应单元格数据,最后通过getallselection方法获取所选行数据
    2017-07-07
  • 简单谈谈Javascript中类型的判断

    简单谈谈Javascript中类型的判断

    这篇文章主要是对判断javascript的数据类型的判断方式进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2015-10-10

最新评论