jQuery UI 1.8で追加されたautocomplete()を使ってみる。

サンプルは以下。

Tags:

コードは以下。

<script type="text/javascript">
 $(function() {
  var availableTags = 
    ["日本", "日本語", "本屋",
     "c++", "java", "php",
     "coldfusion", "javascript", "asp",
     "ruby", "python", "c",
     "scala", "groovy", "haskell", "perl"];
  $("#tags").autocomplete({
   source: availableTags
  });
 });
</script>
<div class="demo">
  <div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags" />
  </div>
</div>

コード解説

• cssも忘れずにバージョンを1.8にしましょう
• autocomplete関数に、{ source: 配列 } の形でデータを渡すだけでOK
• 日本語だと微妙にうまく動かない。「日本」と入力してから「本」を削ると表示されたりする。
• sourceではなく、searchを使うことでリモートからのデータを取得できそう（未確認）

参考：
http://jqueryui.com/demos/autocomplete/