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

shalousun

已于 2024-05-09 17:29:20 修改

阅读量2.4k

点赞数

文章标签： java jquery autocomplete

于 2015-07-25 14:54:30 首次发布

本文链接：https://blog.csdn.net/shalousun/article/details/47056187

版权

最近在做项目时需要用到搜索自动提示，例如姓名查找模糊匹配提示。目前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">

<!--引入Autocomplete官方提供的样式-->
<link href="autocompleteStyles.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.11.1.min.js"></script>

<!--引入Autocomplete库-->
<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>

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

shalousun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jquery autocomplete前后台整合实例(1)

最近在做项目时需要用到搜索自动提示，例如姓名查找模糊匹配提示。目前Jquery的自动提示插件非常多，我会例举几款，写出一些与后台交互的例子本文介绍一款Jquery autocomplete官方地址：https://github.com/devbridge/jQuery-Autocomplete下面直接来实例，不玩虚的，不参与后台交互的这里就不做介绍了，本文涉及的后台开发语言是java,
复制链接

扫一扫