2012年2月24日金曜日

jQuery UIでオートコンプリート

  • このエントリーをはてなブックマークに追加

facebookの検索窓みたいな感じで、
オートコンプリートしてくれるものがほしかったから作ってみた。
jQuery UIで楽々実装してみたらこんな感じ↓


<script type="text/javascript">
$(document).ready(function(){
  var dataItems = {value:hoge,code:foo};
  if($('[name="autoBox"]').length){
    var $autoBox = $('[name="autoBox"]');
    $autoBox.autocomplete({
      source:dataItems,
      select:function(e,ui){
        alert(ui.item.value);
        alert(ui.item.code);
      }
    })
  }
}
</script>
<input type="text" name="autoBox" style="width:550px" />

これでオートコンプリートになる。
オートコンプリートで選択したものをクリックすると、
アラートでhogeとfooという文字列が出てくる感じ。

Adsense