jquery autocomplete前后台整合实例(1)

来源：互联网发布：打印证件照片软件编辑：程序博客网时间：2024/05/11 00:03

最近在做项目时需要用到搜索自动提示，例如姓名查找模糊匹配提示。目前Jquery的自动提示插件非常多，我会例举几款，写出一些与后台交互的例子

本文介绍一款Jquery autocomplete

官方地址：https://www.devbridge.com/sourcery/components/jquery-autocomplete/

下面直接来实例，不玩虚的，不参与后台交互的这里就不做介绍了，本文涉及的后台开发语言是java,在写实例之前先看创作人写的一段文档

Response Format

Response from the server must be JSON formatted following JavaScript object:

{    // Query is not required as of version 1.2.5    "query": "Unit",    "suggestions": [        { "value": "United Arab Emirates", "data": "AE" },        { "value": "United Kingdom",       "data": "UK" },        { "value": "United States",        "data": "US" }    ]}

Data can be any value or object. Data object is passed to formatResults function and onSelect callback. Alternatively, if there is no data you can supply just a string array for suggestions:

{    "query": "Unit",    "suggestions": ["United Arab Emirates", "United Kingdom", "United States"]}

上面文档的意思很简单，服务器返回的json数据必须符合上面两种json格式。下面的的例子就选用第二种

选用第二种根据官方要求的json格式，我们构建一个数据对象。

源码如下：

public class AutoData {
private String query;
private List<String> suggestions;
public String getQuery() {
return query;
}
public void setQuery(String query) {
this.query = query;
}
public List<String> getSuggestions() {
return suggestions;
}
public void setSuggestions(List<String> suggestions) {
this.suggestions = suggestions;
}
}

控制层是采用spring mvc

关键代码如下

@ResponseBody
@RequestMapping(value="/autoComplete",method = RequestMethod.POST)
public AutoData autoComplete(HttpServletRequest request){
String keyword = request.getParameter("keyword");
List<String> list = this.studentService.getNameByName(keyword);//查询返回学生姓名
AutoData autoData = new AutoData();
autoData.setQuery("Unit");//"query":"Unit",
autoData.setSuggestions(list);
return autoData;
}

从下载Autocomplete的源码包中找出jquery.autocomplete.js和styles.css引入页面

html页面测试代码

<!DOCTYPE html>
<html>
<head>
<title>Autocomplete.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link href="autocompleteStyles.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.11.1.min.js"></script>

<script type="text/javascript" src="jquery.autocomplete.js"></script>
<script type="text/javascript">
$(function() {
$('#autocomplete').autocomplete({
serviceUrl : 'autoComplete',//load from server
type:'post',
paramName:'keyword',
onSelect : function(suggestion) {
}
});
$('#sub').on("click",function(){
console.log($("#autocomplete").val());
});
})
</script>

</head>

<body>
<input type="text" id="autocomplete" class="dataInput" placeholder="输入姓名" />
<input type="submit" value="Submit" id="sub"/>
</body>
</html>

现在整个例子就完成了，了解详细的还是请看源文档，本例仅供参考

0 0