Spring MVC jQueryオートコンプリートの例

Spring MVC + jQuery Autocompleteの例

jquery autocomplete

このチュートリアルでは、jQueryオートコンプリートプラグインをSpring MVCと統合する方法を示します。

使用したツールとライブラリ：

Spring MVC 3.2
jQueryオートコンプリートプラグイン–github
メーベン3
Eclipse IDE

チュートリアルのフローを確認します。

テキストボックス付きのHTMLページ。
ユーザーがテキストボックスを結び付けている場合、Ajaxリクエストを（オートコンプリートプラグインを介して）Springコントローラーに送信します。
Springはユーザー入力を処理し、検索結果を（JSON形式で）返します。
「オートコンプリートプラグイン」は返された結果を処理し、オートコンプリートの提案ボックスを表示します。上の図をご覧ください。

1. プロジェクトディレクトリ

最終的なプロジェクトディレクトリ構造、標準のMavenプロジェクトを確認します。

spring-mvc-jquery-autocomplete-directory

2. プロジェクトの依存関係

Spring、JSTL、およびJacksonを宣言します（JSON結果）。

pom.xml

       
        3.2.2.RELEASE
        1.2
        1.9.10
    

    
        
        
            jstl
            jstl
            ${jstl.version}
        

        
        
            org.springframework
            spring-core
            ${spring.version}
        

        
        
            cglib
            cglib
            2.2.2
        

        
            org.springframework
            spring-web
            ${spring.version}
        

        
            org.springframework
            spring-webmvc
            ${spring.version}
        

        
        
            org.codehaus.jackson
            jackson-mapper-asl
            ${jackson.version}

3. Spring MVC –データプロバイダー

Springコントローラー。ユーザーが「/getTags」リクエストを発行すると、Springはユーザー入力で結果をフィルターで除外し、JSON形式で返します。

MainController.java

package com.example.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.example.web.domain.Tag;

@Controller
public class MainController {

    List data = new ArrayList();

    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 getTags(@RequestParam String tagName) {

        return simulateSearchResult(tagName);

    }

    private List simulateSearchResult(String tagName) {

        List result = new ArrayList();

        // 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.example.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.



    

    
        
            /WEB-INF/pages/
        
        
            .jsp

4. jQuery Autocompleteプラグイン

以下のJSPページは一目瞭然です。

WEB-INF/pages/example.jsp

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>




" rel="stylesheet">


  Spring MVC + jQuery + Autocomplete example

#1.オートコンプリートプラグインは、次のHTMLタグを含む提案リストを生成します。


    ...
    ...
    ...

そのため、たとえば次のようにスタイルを設定する必要があります。

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 – JSONデータを返すサーバー側のURLまたはコールバック関数。
paramName –この場合、getTags?tagName=user inputを生成します。デフォルトは?query=user inputです。
delimiter –複数の提案用。
$.parseJSON (response) – Java will return JSON formatted data, so, you need to convert it to a JavaScript object.

5. Demo

「http://localhost:8080/SpringMvcExample/」を起動してアクセスします。

「java」と入力します

jquery autocomplete

「r」と入力します

jquery autocomplete

ソースコードをダウンロード

ダウンロード–SpringMvc-Autocomplete-Example.zip（48 KB）

TOC

Spring MVC jQueryオートコンプリートの例

Spring MVC + jQuery Autocompleteの例

1. プロジェクトディレクトリ

2. プロジェクトの依存関係

3. Spring MVC –データプロバイダー

4. jQuery Autocompleteプラグイン

Spring MVC + jQuery + Autocomplete example

5. Demo

ソースコードをダウンロード

参考文献

Related