Go to Top

jQuery オートコンプリート・入力補完インタフェースまとめ

Pocket

【この記事を読むのに必要な時間は約 7 分です】

画面でユーザにテキストを入力してもらう場合、ユーザの負担を減らすために予測文字列を提供すべきです。簡単にオートコンプリート機能を実装するための jQuery プラグインをいくつかご紹介します。

jQuery UI

王道。使いやすさ、信頼性十分の jQuery ライブラリ。下記に挙げる他のプラグインよりも柔軟性がありカスタマイズが容易。

html などにベタで記述する場合は対象のテキストボックスに ready イベントから autocomplete を適用して入力候補文字列を定義します。ここでは国名を英字で記入するテキストボックスを例にします。

html

<input type="text" id="txtCountry">

JavaScript

$(document).ready( function() {
   $( "#txtCountry" ).autocomplete({
      source: [ 'Jamaica', 'Japan', 'Jordan']
   })
});

以下のように表示されます。
jQueryUI
ソースコード上ではなく、ファイルに固定の候補文字列を定義したい場合、以下のようなフォーマットでファイルを準備します。
今回は countryList.txt という名前のテキストファイルを作成してみます。

["Jamaica","Japan","Jordan"]

ソースにファイル名を設定し、テキストデータを読み込みます。

$('#txtCountry').autocomplete({
    source: 'countryList.txt'
});

また、Ajax を用いてテキストボックスに入力された文字列を用いてサーバから入力候補文字列を取得することも可能です。以下は SAStruts を用いて json 形式でサーバと通信する例です。

JavaScript

$("#txtCountry").autocomplete({
   source: function(req, resp){
      $.ajax({
         url: '${f:url('/XXX/getAutoComplete')}',
         type: "POST",
         cache: false,
         dataType: "json",
         data: {
            searchText: req.term
         },
         success: function(json){
            resp(json);
         },
         error: function(xhr, ts, err){
            resp(['']);
         }
      });
   }
});

Java

@Resource
protected HttpServletRequest request;

@Execute(validator = true, input = "/XXX/index.jsp")
public String getAutoComplete() {

   // 入力中の文字列
   //String searchText = request.getParameter("searchText");

   // データソースから候補文字列を取得
   String[] acList = XXXLogic.getNameList(searchText);

   try {
      HttpServletResponse httpServletResponse = ResponseUtil.getResponse();
      httpServletResponse.setContentType("application/json");
      httpServletResponse.setCharacterEncoding("UTF-8");
      httpServletResponse.getWriter().write(JSON.encode(acList));
   } catch (IOException e) {
      // エラー処理
   }
   return null;
}

入力必須項目など必ず使用するのであれば、画面表示時に入力候補を取得しておいてもよいかもしれません。初期表示時に ActionForm にすべての入力候補データを保持させてみます。

JavaScript

$("#txtCountry").autocomplete({
   source : [${countryList}]
});

アクションクラスの index メソッド内で予め候補文字列を取得、設定します。

Java

@Resource
@ActionForm
public InputPaymentForm searchForm;

@Execute(validator = false)
public String index() {
   // データソースから入力候補を取得
   searchForm.coutryList = "\"Jamaica\",\"Japan\",\"Jordan\"";

   return "index.jsp";
}

参考
Autocomplete | jQuery UI 日本語リファレンス | js STUDIO
[jQuery UI] jQuery UI1.8で追加されたウィジェット(Autocomplete編)

jQuery Autocomplete Plugin

jQuery Autocomplete は2010 年にオリジナルの作者は更新を停止しているものの、有志によってメンテナンスされ続けている根強い人気のあるプラグイン。現在のバージョンは 1.2.3 (2013/8/20)。

GitHub – agarzola/jQueryAutocompletePlugin

Ajax autocomplete for jQuery

UI が洗練され、軽快な動作が可能な Ajax を利用したオートコンプリート機能。
ajax-autocomplete
すっきりとしたスタイルで入力候補が見やすく、カンマ区切りの入力にも対応。手を加えずにさくっと使いたいのであれば悪くないと思います。
ajax-autocomplete2

GitHub -devbridge/jQuery-Autocompletesuggest.js

suggest.js

Google Suggest をモデルとした国産 js ライブラリ。

GitHub – onozaty/suggest.js

Depends on you

jQueryではじめるAjax – 第4回 検索キーワードを提案するSuggest機能の実装

, ,