angularJSにtypeahead.jsを組み込む

autocomplete機能を実現するライブラリにtwitter社製typeaheadというライブラリがあります。これをangularJSのプラグインとして組み込み・利用する方法を書いてみたいと思います。

プラグイン

探してみるといくつかプラグインがあり、どれも大体同じようなものですが、今回は Siyfion/angular-typeahead - Github を使います。

インストール

bowerでインストール

$ bower install angular-typeahead

bowerが利用できない場合は、 Githubのプロジェクトからangular-typeahead.jsまたはangular-typeahead.min.jsをダウンロードし、適当な位置に配置します。

本家typeahead.jsとjQuery(1.9+)も利用するので同様に配置します。

<script src="angular.min.js" type="text/javascript"></script>
<script src="jquery.js" type="text/javascript"></script>
<script src="typeahead.js" type="text/javascript"></script>
<script src="angular-typeahead.min.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>

基本的な使い方

1.モジュールを生成するときにプラグインを読み込む(DIする）

//app.js
var app = angular.module('App', ['siyfion.sfTypeahead']);

2.htmlおよびNgControllerに組み込む

入力部分となるinputタグに. sfTypeahead, datasets, NgModelを設定する

//index.html
<input type="text" class="sfTypeahead" datasets="exampleData" ng-model="foo">

3.コントローラに候補データをセットする

//app.js
app.controller('MyController', ['$scope',
  function($scope) {
    $scope.exampleData = {
      name: 'items',
      local: ['java', 'javascript', 'c++', 'ruby', 'perl', 'python' ]
    };
  }
]);

指定する値の詳細は以下のページに書いてあるものと同じです。 twitter/typeahead.js - Github

応用編

上記の例はマニュアルに載っているのそのままなので、もう少し応用した例。

「リストにならんだDOMの中にinputタグがあり、その中にtypeaheadを表示したい。」という場合、どのように実装するか。

まずはHTML。リストデータとなるusersを追加し、NgRepeatでループさせてユーザ一覧を表示。

//index.html
<div ng-repeat="u in users">
    <useritem user="u" languages="languages" />
</div>

Controllerは前項の構成に、リストデータのusersを追加。

//app.js
app.controller('MyController', ['$scope',
  function($scope) {
    $scope.users = [{
      name: "bill",
      language:""
    }, {
      name: "luis",
      language:""
    }];

    $scope.languages = {
      name: 'items',
      local: ['java', 'javascript', 'c++', 'ruby', 'perl', 'python' ]
    };
  }
]);

NgRepeatで出力されたDomに対して、directiveを利用してhtmlを出力していきます。

//app.js
app.directive('useritem', function($compile) {
  var linker = function(scope, element, attr) {
    element.html('<span>{{user.name}}</span>' +
      '<input type="text" class="sfTypeahead" ' +
      '  datasets="languages" ng-model="user.language">');
    $compile(element.contents())(scope);
  };

  return {
    restrict: 'E',
    replace: true,
    link: linker,
    scope: {
      user: '=',
      languages: "="
    }
  };
});

ポイントとしてはauto completeの候補データlanguagesを<useritem>に渡し、directive内で各elementに対してのdatasetsとして設定しているところです。当初directiveのscopeへの値の渡し方が理解できず結構悩みました。

今回作ったDemo - http://embed.plnkr.co/Qalhe2oG6gpSr3njF4PQ/preview

angularJSすぐハマるけど、わかってくるとホントによく出来たライブラリだなぁ思います。

my story blog

JavaScriptとかRubyの技術的なことを書きたい