jquery autocomplete、width = 604、height = 341

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

使用されるツールとライブラリ:

  1. Spring MVC 3.2

  2. jQueryオートコンプリートプラグイン –


github

。 Maven 3

  1. Eclipse IDE

チュートリアルのフローを確認する:

  1. テキストボックスを含むHTMLページ.

  2. ユーザーがテキストボックスを使用している場合、Ajaxリクエストが発生します（via

オートコンプリートプラグイン）をSpringコントローラに送信します。

  1. Springはユーザー入力を処理し、検索結果を返します（JSONで

フォーマット）。

  1. 「オートコンプリートプラグイン」は、返された結果を処理し、

オートコンプリートの提案ボックス。上記の図を参照してください。

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

標準のMavenプロジェクトである、最終的なプロジェクトディレクトリ構造を見直してください。


spring-mvc-jquery-autocomplete-directory、width = 495、height = 507

プロジェクトの依存関係

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 };
          })

       };

    }
   });

  1. serviceUrl – サーバー側のURLまたはその戻り値を返すコールバック関数

JSONデータ。

  1. paramName – この場合、

`getTags？tagName =ユーザー入力 ‘。デフォルトは `？query = user input`です。

  1. デリミタ – 複数の提案に対して.

  2. $ .parseJSON（response） – JavaはJSON形式のデータを返すので、

それをJavaScriptオブジェクトに変換する必要があります。

5.デモ

開始し、 ”


http://localhost:8080/SpringMvcExample/


“にアクセスします。

タイプ ”

java

”


jquery autocomplete、width = 604、height = 341

タイプ ”

r

”


jquery autocomplete、width = 604、height = 341

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

ダウンロード:

SpringMvc-Autocomplete-Example.zip

（48 KB）

参考文献


  1. 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の例


  1. jQuery $ .map（）の例


  2. jQuery $ .each（）の例


  3. Wikipedia:JSON


autocomplete


jquery


spring mvc