ランプの中身(Ruby on Railsのシステム開発)
ランプの中身(Ruby on Railsのシステム開発)では、株式会社ケイビーエムジェイのRuby on Railsエンジニアが蓄積したノウハウを公開しています。Ruby on Railに関する技術解説や実践的なノウハウなど、開発現場の技術に則したコンテンツを随時追加していきます。 初心者の方でもわかりやすい技術解説を心がけています。リクエスト、ご質問も受け付けいますので、お気軽にコメントを記述して下さい。

< Passenger (mod_rails... | メイン  |  Scaffoldはど... >

yoppiの中身（Ruby
2008.05.23

ドロップダウンに簡単にオートコンプリート機能を追加する方法

　こんにちは。

　KBMJでRuby on Rails を使ったweb開発に携わっているyoppiといいます。

 

　今回は少し毛色を変えてAjaxな話題です。

　ライブラリを使って既存のドロップダウンに簡単にオートコンプリート(入力したテキストで始まる候補だけリストに表示させる)機能を追加する方法を紹介したいと思います。

　ライブラリはExt(今回のバージョンは2.1)を使います。

 

　今回読み込む必要があるのは、ext-base.js,ext-all.js,ext-all.css,xtheme-gray.css,combo.css、画像はExtのソースファイルのresources/images/default/layoutとresources/images/default/formを[DocumentRoot]/stylesheets/images/defaultへ配置しました。

 

　ドロップダウンは以下とすると 

<select id="prefectures">

 

<option value="1">北海道</option>
<option value="2">青森県</option>
<option value="3">岩手県</option>
<option value="4">宮城県</option>
・・・
<option value="46">鹿児島県</option>
<option value="47">沖縄県</option></select>

 

以下のコードを追加します。 (transformにドロップダウンのidを指定すればよい)

<script type="text/javascript">
//<![CDATA[

function init(){
var converted = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'prefectures',
width:135,
forceSelection:true});}
Ext.EventManager.on(window, 'load', init);

//]]>
</script>

 

　以上が、ドロップダウンにオートコンプリート機能が追加する手順です。

　とても簡単ですよね。

　導入するチャンスがあったなら是非試してみてください。

 

　Let's ajax! 

コメント (0)  |トラックバック (0)

ブックマークに追加する

トラックバック URL

この記事にコメントする

ニックネーム:
メールアドレス:
URL:


KBMJのWebソリューション
Ruby on Rails Summer Festival 2008開催決定！！

TOPICS

2008/08/14
「ZD Net Builder」の連載記事です。第七回は「Rubyでどう書く？：RubyCocoa＋Core Animationでお手軽アニメーション」が掲載されました。

2008/08/06
「ZD Net Builder」の連載記事です。第六回は「Rubyでどう書く？特別編：Matzからのお題」が掲載されました。

2008/07/29
「アットマーク・アイティ」にケータイWebアプリ開発、9つの注意点が掲載されました。

2008/07/11
「ZD Net Builder」の連載記事です。第五回は「Rubyでどう書く？：RubyでWord文書を作成する」が掲載されました。

カテゴリ

全体のRoR最新ブログ一覧

プロフィール

  • よっぴ
  • 33 歳
  • yoppiの中身は空っぽです。Rubyistです。Railsで開発してます。

ブログの購読

RSS

timelog
株式会社ケイビーエムジェイロゴ