Spring MVC jQueryオートコンプリートの例
このチュートリアルでは、jQueryオートコンプリート・プラグインをSpring MVCと統合する方法を説明します。
使用されるツールとライブラリ:
-
Spring MVC 3.2
-
jQueryオートコンプリートプラグイン –
github
。 Maven 3
-
Eclipse IDE
チュートリアルのフローを確認する:
-
テキストボックスを含むHTMLページ.
-
ユーザーがテキストボックスを使用している場合、Ajaxリクエストが発生します(via
オートコンプリートプラグイン)をSpringコントローラに送信します。
-
Springはユーザー入力を処理し、検索結果を返します(JSONで
フォーマット)。
-
「オートコンプリートプラグイン」は、返された結果を処理し、
オートコンプリートの提案ボックス。上記の図を参照してください。
1.プロジェクトディレクトリ
標準のMavenプロジェクトである、最終的なプロジェクトディレクトリ構造を見直してください。
プロジェクトの依存関係
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 – データプロバイダ
Springのコントローラで、ユーザーが “/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 – resourcesフォルダをマップします。
<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 Plugin
以下の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>
<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 }; }) }; } });
-
serviceUrl – サーバー側のURLまたはその戻り値を返すコールバック関数
JSONデータ。
-
paramName – この場合、
`getTags?tagName =ユーザー入力 ‘。デフォルトは `?query = user input`です。
-
デリミタ – 複数の提案に対して.
-
$ .parseJSON(response) – JavaはJSON形式のデータを返すので、
それをJavaScriptオブジェクトに変換する必要があります。
ソースコードをダウンロードする
ダウンロード:
SpringMvc-Autocomplete-Example.zip
(48 KB)
参考文献
-
https://github.com/devbridge/jQuery-Autocomplete
[jQueryオートコンプリート
プラグイン]。
http://designshack.net/articles/javascript/create-a-simple-autocomplete-with-html5-jquery/
[Create
HTML5によるシンプルなオートコンプリート
ベストAjax jQueryオートコンプリートチュートリアル&プラグイン、サンプルあり]。
jQuery $ .parseJSONの例