FlexBoxでコンボボックス

JavaScript

FlexBox(http://www.fairwaytech.com/flexbox/)というjQueryのプラグインを使ったので、そのメモ。

概要

FlexBoxは、いわゆるコンボボックスを作るプラグインで、ユーザがテキストを入力するとその下に選択肢の候補が表示される。オートコンプリートのようにも使える。

使い方

HTML中にコンボボックスの表示領域を確保する。

<div id="country-select"></div>

ページロード後の処理で設定をする。

$(function() {
    $("#country-select").flexbox("countries.json");
});

flexboxの引数にはコンボボックスの選択肢のデータを含んだjsonを返すパスを指定する。

jsonデータには以下のように、"id"と"name"を含んだオブジェクトの配列を含める。すると選択肢のリストにnameの値が表示される。テキストをキーボードで入力すると、マッチするものがテキストボックスの下にリスト表示される。

{"result":[{"id":1, "name":"中つ国"}, {"id":2, "name":"ペンギン村"}, {"id":3, "name":"ハイラル"}]}

お手軽です。