jquery autocomplete前后台整合实例(2)
来源:互联网 发布:office办公软件合集 编辑:程序博客网 时间:2024/04/28 21:36
本文要介绍的jquery autocomplete是jquery ui的。需要的库从jquery ui官网下载
后台只要返回一个json格式的字符串数组
注:采用spring mvc
@ResponseBody
@RequestMapping(value="/autoComplete",method = RequestMethod.POST)
public List<String> autoComplete(HttpServletRequest request){
String keyword = request.getParameter("keyword");
List<String> list = this.studentService.getNameByName(keyword);//从数据库查询出姓名
return list;
}
页面关键代码
<!--引入jquery ui的样式-->
<link rel="stylesheet" href="../css/jquery-ui.css" />
<!--引入jquery ui库-->
<script type="text/javascript" src="../js/jquery-ui.js"></script>
<input type="text" name="keyword" id="keyword" value=""
class="inp_srh" placeholder="搜索姓名"/>
插件调用
$("#keyword").autocomplete({
minLength : 1,
autoFocus : true,
source : function(request, response) {
$.ajax({
type : "POST",
url : "autoComplete",//从后台获取数据
dataType : "json",
data : {
keyword : $("#keyword").val()
},
success : function(json) {
response($.map(json, function(item) {
return {
label : item,
value : item
};
}));
}
});
}
}); //
通过上面几个片段代码,实际基本完成了自动提示
它有很多的配置,了解更多配置看官方文档
- jquery autocomplete前后台整合实例(2)
- jquery autocomplete前后台整合实例(1)
- jQuery-autoComplete实例
- jquery ui autocomplete实例
- django 前后台交互实例
- Jquery Ajax前后台交互
- Jquery AutoComplete的使用方法实例
- Jquery AutoComplete的使用方法实例
- Jquery AutoComplete的简单实例
- Jquery AutoComplete的使用方法实例
- Jquery AutoComplete的使用方法实例
- Jquery AutoComplete的使用方法实例
- Jquery AutoComplete的使用方法实例
- Jquery AutoComplete的使用方法实例
- Jquery AutoComplete的使用方法实例
- jquery autocomplete 自动提示实例
- Jquery AutoComplete的使用方法实例
- jQuery.Autocomplete 与struts2的整合
- C#字母与ASCII码的转换
- hdu 1024 dp滚动数组
- HDU 数据结构 - 字典树 解题报告汇总
- 树的剪枝(pruning)算法
- android studio配置android开发环境
- jquery autocomplete前后台整合实例(2)
- How far away ?
- openCV—Python(3)——访问与操作像素
- POJ 3278 Catch That Cow
- xml解析org.xml.sax.SAXParseException: The element type "comment" must
- Min Stack
- 【dfs】hdu 1111 Secret Code
- 获取应用签名MD5指纹的方法
- Code Forces 560 B. Gerald is into Art(水~)