backbone.jsとjQueryでオートコンプリート

backbone.jsを使用するjQueryのプラグインBackbone-Widgetsで、フォームのオートコンプリートができるということなので試して見ました
https://github.com/martindrapeau/Backbone-Widgets

サンプルはこちら
http://dl.dropbox.com/u/494487/backbone-sample/autocomplete/index.html

$(function(){
    var Track = Backbone.Model.extend({});
    var library = [new Track({id:1, title: "I Saw Her Standing There"}),
	    	   new Track({id:2, title: "Misery"}),
	    	   new Track({id:3, title: "Anna (Go To Him)"}),
	    	   new Track({id:4, title: "Chains"}),
	    	   new Track({id:5, title: "Boys"}),
	    	   new Track({id:6, title: "Ask Me Why"}),
	    	   new Track({id:7, title: "Please Please Me"}),
	    	   new Track({id:8, title: "Love Me Do"}),
	    	   new Track({id:9, title: "P.S. I Love You"}),
	    	   new Track({id:10, title: "Baby It's You"}),
	    	   new Track({id:11, title: "Do You Want To Know A Secret"}),
	    	   new Track({id:12, title: "A Taste Of Honey"}),
	    	   new Track({id:13, title: "There's A Place"}),
	    	   new Track({id:14, title: "Twist And Shout"})];
    var TrackList = Backbone.Collection.extend({
	model: Track
    });

    var tracks = new TrackList(library);

    $('#new-input').autocomplete({
	collection: tracks,
	attr: 'title',
	noCase: true,
	ul_class: 'autocomplete shadow',
	ul_css: {'z-index':1234}
    });
});

autocompleteメソッドにはハッシュでオプションを渡します。
「collection」に Backbone.Collectionのインスタンスを設定し、「attr」にautocompleteするモデルの属性名を渡します。
「noCase」にtrueを渡すとautocompleteするときに大文字小文字を区別しなくなります。
候補の選択時は、デフォルトでinput要素のvalueにattrの値をセットしますが、「onselect」にコールバック関数を渡すことで
挙動を変更することができます。