Spring MVC + jQuery自动完成示例

在本教程中，我们向您展示如何将jQuery自动完成插件与Spring MVC集成。

使用的工具和库：

1. Spring MVC 3.2
2. jQuery自动完成插件– github
3. Maven 3
4. Eclipse IDE

查看教程的流程：

1. 一个带有文本框的HTML页面。
2. 如果用户在文本框中输入内容，它将向Spring控制器发出Ajax请求（通过自动完成插件）。
3. Spring处理用户输入并返回搜索结果（JSON格式）。
4. “自动完成插件”处理返回的结果并显示自动完成建议框。 参见上图。

1.项目目录

查看最终的项目目录结构，这是一个标准的Maven项目。

2.项目依赖

声明Spring，JSTL和Jackson（JSON结果）。

pom.xml

<properties>
		<spring.version>3.2.2.RELEASE</spring.version>
		<jstl.version>1.2</jstl.version>
		<jackson.version>1.9.10</jackson.version>
	</properties>

	<dependencies>
		<!-- jstl -->
		<dependency>
			<groupId>jstl</groupId>
			<artifactId>jstl</artifactId>
			<version>${jstl.version}</version>
		</dependency>

		<!-- Spring Core -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-core</artifactId>
			<version>${spring.version}</version>
		</dependency>

		<!-- need this for @Configuration -->
		<dependency>
			<groupId>cglib</groupId>
			<artifactId>cglib</artifactId>
			<version>2.2.2</version>
		</dependency>

		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-web</artifactId>
			<version>${spring.version}</version>
		</dependency>

		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-webmvc</artifactId>
			<version>${spring.version}</version>
		</dependency>

		<!-- Jackson -->
		<dependency>
			<groupId>org.codehaus.jackson</groupId>
			<artifactId>jackson-mapper-asl</artifactId>
			<version>${jackson.version}</version>
		</dependency>

	</dependencies>

3. Spring MVC –数据提供者

如果用户发出“ /getTags ”请求，Spring控制器将使用用户输入过滤掉结果并以JSON格式返回。

MainController.java

package com.mkyong.web.controller;

import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.mkyong.web.domain.Tag;

@Controller
public class MainController {

	List<Tag> data = new ArrayList<Tag>();

	MainController() {
		// init data for testing
		data.add(new Tag(1, "ruby"));
		data.add(new Tag(2, "rails"));
		data.add(new Tag(3, "c / c++"));
		data.add(new Tag(4, ".net"));
		data.add(new Tag(5, "python"));
		data.add(new Tag(6, "java"));
		data.add(new Tag(7, "javascript"));
		data.add(new Tag(8, "jscript"));

	}

	@RequestMapping(value = "/", method = RequestMethod.GET)
	public ModelAndView getPages() {

		ModelAndView model = new ModelAndView("example");
		return model;

	}

	@RequestMapping(value = "/getTags", method = RequestMethod.GET)
	public @ResponseBody
	List<Tag> getTags(@RequestParam String tagName) {

		return simulateSearchResult(tagName);

	}

	private List<Tag> simulateSearchResult(String tagName) {

		List<Tag> result = new ArrayList<Tag>();

		// iterate a list and filter by tagName
		for (Tag tag : data) {
			if (tag.getTagName().contains(tagName)) {
				result.add(tag);
			}
		}

		return result;
	}

}

Tag.java

package com.mkyong.web.domain;

public class Tag {

	public int id;
	public String tagName;

	//getter and setter methods

	public Tag(int id, String tagName) {
		this.id = id;
		this.tagName = tagName;
	}

}

mvc-dispatcher-servlet.xml – Map the resources folder.

<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="
        http://www.springframework.org/schema/beans     
        http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
        http://www.springframework.org/schema/mvc 
		http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
        http://www.springframework.org/schema/context 
        http://www.springframework.org/schema/context/spring-context-3.0.xsd">

	<context:component-scan base-package="com.mkyong" />

	<bean
		class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="prefix">
			<value>/WEB-INF/pages/</value>
		</property>
		<property name="suffix">
			<value>.jsp</value>
		</property>
	</bean>

	<mvc:resources mapping="/resources/**" location="/resources/" />

	<mvc:annotation-driven />

</beans>

4. jQuery Automplete插件

下面的JSP页面应该是不言自明的。

WEB-INF/pages/example.jsp

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<script src="<c:url value="/resources/core/jquery.1.10.2.min.js" />"></script>
<script src="<c:url value="/resources/core/jquery.autocomplete.min.js" />"></script>
<link href="<c:url value="/resources/core/main.css" />" rel="stylesheet">
</head>
<body>
  <h2>Spring MVC + jQuery + Autocomplete example</h2>

  <div>
	<input type="text"  id="w-input-search" value="">
	<span>
	  <button id="button-id" type="button">Search</button>
	</span>
  </div>
	
  <script>
  $(document).ready(function() {

	$('#w-input-search').autocomplete({
		serviceUrl: '${pageContext.request.contextPath}/getTags',
		paramName: "tagName",
		delimiter: ",",
	   transformResult: function(response) {
		    	
		return {      	
		  //must convert json to javascript object before process
		  suggestions: $.map($.parseJSON(response), function(item) {
		            	
		      return { value: item.tagName, data: item.id };
		   })
		            
		 };
		        
            }
		    
	 });
				
  });
  </script>
	
</body>
</html>

＃1。 自动完成插件将使用以下HTML标签生成建议列表。

<div class="autocomplete-suggestions">
    <div class="autocomplete-suggestion autocomplete-selected">...</div>
    <div class="autocomplete-suggestion">...</div>
    <div class="autocomplete-suggestion">...</div>
</div>

因此，您需要设置样式，例如：

main.css

.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 5px 5px; white-space: nowrap; overflow: hidden; font-size:22px}
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: bold; color: #3399FF; }

＃2。 对于此“自动完成插件”，来自服务器的响应必须是JSON格式JavaScript对象，如下所示：

{
    suggestions: [
        { value: "Java",        data: "1001" },
        { value: "JavaScript",  data: "1002" },
        { value: "Ruby",        data: "1003" }
    ]
}

＃3。 查看以下Ajax请求

$('#w-input-search').autocomplete({
	serviceUrl: '${pageContext.request.contextPath}/getTags',
	paramName: "tagName", // ?tagName='user input'
	delimiter: ",",
	transformResult: function(response) {
		    	
	   return {
		        	
	      suggestions: $.map($.parseJSON(response), function(item) {     
		 return { value: item.tagName, data: item.id };
	      })
		            
	   };
		        
	}	    
   });

1. serviceUrl –返回JSON数据的服务器端URL或回调函数。
2. paramName –在这种情况下，它将生成getTags?tagName=user input 。 默认值为?query=user input 。
3. 定界符–用于多个建议。
4. $ .parseJSON（响应）– Java将返回JSON格式的数据，因此，您需要将其转换为JavaScript对象。

5.演示

启动并访问“ http：// localhost：8080 / SpringMvcExample / ”。

输入“ java ”

输入“ r ”

下载源代码

下载– SpringMvc-Autocomplete-Example.zip （48 KB）

参考文献

1. jQuery自动完成插件
2. 使用HTML5和jQuery创建简单的自动完成功能
3. 35+最佳Ajax jQuery自动完成教程和带有示例的插件
4. jQuery $ .parseJSON示例
5. jQuery $ .map（）示例
6. jQuery $ .each（）示例
7. 维基百科：JSON

标签： 自动完成的 jQuery Spring MVC

翻译自: https://mkyong.com/spring-mvc/spring-mvc-jquery-autocomplete-example/