Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@maekun

【jQuery】AutoComplete機能の実装手順【Java/Spring】

まず以下を読み込む

<link type="text/css" rel="stylesheet"
  href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
<script type="text/javascript"
  src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
  src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

サンプルコード

autocomplete.js
$(function(){
    /** プロジェクト名が変更になっても修正が必要なくなるよう実装**/
    var pathname = location.pathname.split("/")[1];

    $.ajax({
        /** オートコンプリート用のリストを取得するURL*/
        url: "/" + pathname + "/getAutoComplete",
        dataType: "json",
        type: 'GET'
    }).then(function(searchResult){ /** 検索結果のリストは引数に自動で入る*/
        $('.txtKeywd').autocomplete({ /** 実装したい入力欄のid/classを指定*/
            source : searchResult, /** 候補リスト(必須)*/
            autoFocus: true, /**リスト表示に際してリスト先頭にフォーカスするか*/
            delay: 500, /**キー入力からリスト表示までの遅延時間(ミリ秒)*/
            minLength: 1 /**オートコンプリート機能が働く最小文字数*/
        });
        },function(){
    });
});
GetAutoCompleteController.java
import net.arnx.jsonic.JSON;

/** 商品検索フォームのオートコンプリート用コントローラ. */
@Controller
@RequestMapping("/getAutoComplete")
public class GetAutoCompleteController {

    /** 全商品名をオートコンプリートに渡す. */
    @ResponseBody
    @RequestMapping
    public String getAutoComplete(){
        List<String> nameList = getAutoCompleteService.getAllNameList();
        return JSON.encode(nameList);
    }
}

注意点

  • JSONのエンコーダはJSONICを使用していますので、dependencyタグはコチラから入手してpom.xmlに追加
    https://mvnrepository.com/artifact/net.arnx/jsonic

  • JSON.encode()に何を渡すか
    ドメイン:オブジェクトを渡すとフィールド名をキーとするマップ(連想配列)をjsのsarchResultに渡す)
    リストオブジェクト:リストをそのままjsのsarchResultに渡す)

参考

autoFocus: 候補メニューの最初の候補に自動フォーカス
delay: 入力されて検索実行までのディレイ時間
minLength: 候補表示するための最低の入力文字数

その他のオプションについては、以下を参考。
Autocomplete Widget | jQuery UI API Documentation

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
3
Help us understand the problem. What are the problem?