オートコンプリート - 入力画面にうまく組みこんでユーザビリティアップ

入力画面などで入力項目数が多数ある場合や、以前に入力したものを候補として表示・入力させたい場合はオートコンプリートウィジェットが活躍する。

jQuery UI、Yahoo UIではそれぞれ「autocomplete」「AutoComplete」、Dojoでは「Combobox」がそれにあたる。

jQueryでは候補となる文字列を配列として定義しておき、autocompleteで候補文字列の配列を指定するだけで動作する。候補をすべて一覧表示する関数・メソッド等は自前で用意する必要があるが、単に入力補完だけを実装する場合は書くコード量も少なく、さまざまな場面で活躍してくれるだろう。

HTMLファイル - autocomplete-jquery.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>autocomplete / jQuery UI</title>
<link rel="stylesheet" href="./jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="./js/jquery/jquery-1.2.6.js"></script>
<script type="text/javascript" src="./js/jquery/ui/ui.core.js"></script>
<script type="text/javascript" src="./js/jquery/ui/ui.autocomplete.js"></script>
<script type="text/javascript">
<!--
  $(document).ready
  (
      function()
      {
          var data = new Array
          (
              'jQuery',
              'jQuery UI',
              'YUI',
              'Dojo'
          );

          $('#autoComplete').autocomplete(data);
      }
  );
-->
</script>
</head>

<body>

<h1>autocomplete / jQuery UI</h1>

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

</body>

</html>

Firefoxでの動作イメージ

Internet Explorerでの動作イメージ