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

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

　こんにちは。

　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!