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

$('#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編)