Bootstrap でオートコンプリート検索付きプルダウンリストを実装するには typeahead.js が便利

Bootstrapで、オートコンプリートで絞り込む検索ボックスを実装しようと思ってプラグインを探したところ typeahead.js がよく使われていそうな感じだったので試してみました。

先に説明用のコード全体を貼りました。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/typeahead.css">
  </head>
  <body>

  <div class="container">
    <div class="form-group">
      <label>Station</label>
      <input type="text" class="form-control">
    </div>
  </div>

  <script src="js/jquery-1.11.0.min.js"></script>
  <script src="js/typeahead.bundle.min.js"></script>
  <script>
    var engine = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      local: [{ value: '東京' }, { value: '新宿' }, { value: '池袋' }, { value: '渋谷' }]
    });

    engine.initialize();

    $(':input').typeahead(null, {
      name:'stations',
      source: engine.ttAdapter()
    })
  </script>
  </body>
</html>

ブラウザで表示するとこんな感じです。

typeahead-example

  1. 必要なフィアルの読み込み

上記の例では、スタイルシートは css ディレクトリに、Javascriptは js ディレクトリに入れています。

typeahead 本体のjsは、Githubリポジトリ から取得した typeahead.bundle.js を js ディレクトリに置いています。

ところで、typeaheadのリポジトリにはなぜか、cssが含まれていません。
検索すると、Bootstrap3 用の typeahead.js のCSSはいくつか見つかるので、とりあえず hyspace / typeahead.js-bootstrap3.less を試しました。
typeahead.js-bootstrap3.less から typeahead.css を追加しています。

  1. テキストボックスに対して Typehead を有効にする
  $(':input').typeahead(null, {
    name:'stations',
    source: engine.ttAdapter()
  })

typehead の第1引数は、オプションを指定します。全部デフォルトの場合は null を指定しておきます。

第2引数は、データセット のオプションを指定します。

  • name: プルダウンのclass名に使われます。
  • displayKey: デフォルトでは、プルダウンオプションの値とラベルはどちらも value が使われますが、表示用フィールドを別にしたい場合は displayKey で指定できます。
  • source: 第1引数にtypeaheadを有効にしたテキストボックスに入力された文字列、題2引数にコールバックが渡される関数を指定します(例: examplesのThe Basic)。または、パッケージに含まれるスジェッションエンジン Bloodhound を利用することもできます。上記の例では Bloodhound を使っています。
  1. Bloodhoundを初期化

source に直接関数をしていするよりも、機能が豊富な Bloodhound を利用する方がおすすめです。

  var engine = new Bloodhound({
    datumTokenizer: function(d){ return d.value },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: [{ value: '東京' }, { value: '新宿' }, { value: '池袋' }, { value: '渋谷' }]
  });

初期化のオプション
以下の項目を押さえれば後は、Githubのドキュメントやソースをみれば応用できると思います。

  • datumTokenizer: 必須です。Javascriptオブジェクトの配列(Datums)の各要素を引数に取り、検索対象のプロパティを返す関数を指定します。
  • queryTokenizer: 必須です。テキストボックスに入力された文字列を引数に取り、適当に文字列を分割した配列を返します。英語だと空白で分割してさらに絞り込みとかできますが、日本語だとあまり使えなさそう。
  • local: 最初に保持しておく、Datums
  • prefetch: 最初にAjaxでロードするDatums
  • remote: local または prefetch で最初に用意したデータで間に合わなくなった場合に、さらにAjaxでDatumsをロードする場合に指定します。

今回は、検索対象がデータベースで、それなりに量が多かったので、remoteを指定してサーバーから候補を取得するように実装しましたが、リクエストのタイミングも良きに計らってくれるのでとても便利です。

参考:
ちょっと古いのでscript側は使えませんが、サーバー再度まで含めた例が参考になります。
Bootstrap Auto Complete in php mysql | jQuery Auto Suggest

bootstrap3でアイコンを使う

Bootstrap3からアイコンがオプションになり、外部の Glyphicons を利用するようになりました。

Glyphicons png のみは無料で、ベクター形式のデータが有償になっています。

Bootstrap3とGlyphiconsを組み合わせて利用するには、glyphicons用のCSSを追加で指定します。

Bootstrap CDN を使用する場合は以下のlinkタグを追加します。
[html]
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
[/html]

これは嘘で、bootstrap-glyphicons.cssを追加しなくても使える。公式にそんな説明ないわけだ。

使い方は、http://getbootstrap.com/components/#glyphiconsで使用したいアイコンの値を確認しクラスに指定します。
[html]
<button class="btn btn-primary" name="add_member"><i class="glyphicon glyphicon-plus"></i> 追加</button>
[/html]
表示結果
glyphicon_glyphicon-plus

[bookmark] 50 Must-have plugins for extending Twitter Bootstrap

本当に使えるBootstrapプラグインがよくまとまってます。
50 Must-have plugins for extending Twitter Bootstrap

その他便利なプラグインも挙げておきます。

Bootstrap Growl
Alert をGrowlのようにフローティングで表示したいときに便利なプラグイン
WebSite | Github

Datepicker for Bootstrap bootstrap-datepicker.js

Bootstrapで日付フォームでカレンダーを表示したい場合にはこれを使えば間違いないです。
bootstrap-datepicker

input以外のボタンなどに適用する場合は、初期表示時の日付を指定する data-date 属性が必須になります。
例えば、今日の日付をセットする場合は、以下のようなHTMLとJavascriptの組み合わせになります(日付のフォーマットで利用しているのは、jquery-dateFormatです)。
[html gutter=”false”]
<button id="date-change-btn" class="btn small">Change</button>
[/html]
[javascript gutter=”false”]
$(‘#date-change-btn’).data(‘date’, $.format.date(new Date(), ‘yyyy-MM-dd’))
[/javascript]

GWT (Google Web Toolkit) 2.5.0 Hello World

1. ダウンロードサイトからgwtを入手する
https://code.google.com/p/google-web-toolkit/downloads/detail?name=gwt-2.5.0.zip
2. 解凍
[bash]
$ unzip gwt-2.5.1.zip
[/bash]
3. webAppCreatorを使ってプロジェクトを生成
[bash]
$ ./webAppCreator -out ../HelloWorldGWT com.example.HelloWorldGWT
[/bash]
以下のパラメータが必須

  • -out: 出力先ディレクトリ
  • プロジェクト名 “fully-qualified” java的なパッケージ名を指定する必要があります。

4. 開発モードで動作確認
GWTはJavaでコードを記述してJavascriptにコンパイルする開発ツールですが、毎回コンパイルしながら開発しなくても良いように開発用ツールが用意されています。まずは開発ツールを利用して動作を確認します。
[bash]
$ cd ../HelloWorldGWT/
$ ant devmode
[/bash]
開発ツール”GWT Development Mode”が開くので Development Mode タブで [Launch Default Browser]をクリックするか、[Copy Clip Board]をクリックしてURLをコピーしてブラウザのアドレスバーにペーストしてテストサーバーにアクセスできます。

この内容は本家サイトで確認できます。
http://www.gwtproject.org/gettingstarted.html

5. コンパイル
次にJavascriptにコンパイルして動作させてみます。
[bash]
$ ant war
[/bash]
生成された、HelloWorldGWT.warをTomcatやJettyにデプロイします。