この記事はアピリッツの技術ブログ「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!
