您现在的位置是:首页 > 正文

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

2024-01-30 22:25:44阅读 2

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

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










网站文章

  • hadoop安装教程,分布式配置 CentOS7 Hadoop3.1.2

    hadoop安装教程,分布式配置 CentOS7 Hadoop3.1.2

    安装前的准备 1、 准备4台机器、或虚拟机 4台机器的名称和IP对应如下 master:192.168.199.128 slave1:192.168.199.129 slave2:192.168.199.130 slave3:192.168.199.131 2、分别为4台机器安装JDK8 步骤详细请参考:CentOS7卸载 OpenJDK 安装Sun的JDK...

    2024-01-30 22:25:11
  • 【OpenCV3】阈值化操作——cv::threshold()与cv::adaptiveThreshold()详解

    【OpenCV3】阈值化操作——cv::threshold()与cv::adaptiveThreshold()详解

    阈值化操作在图像处理中是一种常用的算法,比如图像的二值化就是一种最常见的一种阈值化操作。opencv2和opencv3中提供了两种阈值化操作接口,即cv::thread()与cv::adaptiveThreshold(),这里将对这两个接口进行介绍和对比。

    2024-01-30 22:25:04
  • 基于darknet的目标检测开发说明书

    1. 测试darknet1) 利用python版本的darknet清楚YOLO V3的输出.其中要修改一下加载meta数据集, 即*.data中的*.names文件路径. 在测试过程中, 我们将用到meta.classes, meta.names. 这些信息都在*.data中定义了. 经过测试, 对于一张头像而言, YOLO V3的输出格式为:[('car', 0.9995980858802...

    2024-01-30 22:24:58
  • paxos算法java实现_基于python的Paxos算法实现

    paxos算法java实现_基于python的Paxos算法实现

    理解一个算法最快,最深刻的做法,我觉着可能是自己手动实现,虽然项目中不用自己实现,有已经封装好的算法库,供我们调用,我觉着还是有必要自己亲自实践一下。这里首先说明一下,python这种动态语言,对不熟...

    2024-01-30 22:24:41
  • android studio 集成ffmpeg_android下vulkan与opengles纹理互通

    android studio 集成ffmpeg_android下vulkan与opengles纹理互通

    先放demo源码地址:https://github.com/xxxzhou/aoce 06_mediaplayer效果图:主要几个点:用ffmpeg打开rtmp流。使用vulkan Compute s...

    2024-01-30 22:24:11
  • Babel转码器入门

    Babel转码器入门

    Babel转码

    2024-01-30 22:24:05
  • 谈谈代码中的this

      js中我们常常会遇到this,this的具体指向问题对于很多同学来说是很懵懂的;就想lz刚开始接触时候就是一脸的懵逼,经常被一些题目转的眼花缭乱。那么今天lz就跟大家一起交流一下这个this的指向问题!  背景:不久前有个同事给我们发了一道有关this的题目,于是便有了今天的故事。如下题:class D0XX { constructor () { this...

    2024-01-30 22:23:58
  • vue3 开启 https

    vue3 开启 https

    会在当前目录生成,cert.crt 和 cert.key 两个文件。会在当前目录生成,ca.crt 和 ca.key 两个文件。

    2024-01-30 22:23:29
  • 软件工程≠计算机科学 之 思考

    软件工程≠计算机科学首先,这篇文章的英文比上次阅读作业的英文好懂多了可能是因为上次的多是讲技术的,可以归类为科技英语吧,好多的词都不认识这次更偏向于议论文吧We need software that can be put together in a reasonable amount of time, for a reasonable cost, that works som...

    2024-01-30 22:23:21
  • 用电脑开热点启用电脑无线配置

    用电脑开热点启用电脑无线配置

    电脑系统打开热点,不用安装360也能用电脑给手机开热点,给多电脑开热点无线。

    2024-01-30 22:23:16