UNPKG

backbone.typeahead.js

Version:

A Bootstrap inspired Typeahead for Backbone.js

2 lines 4 kB
!function(e,t,i){"use strict";var s=function(i,s){if(t.isArray(i))i=i.slice(0),t.isObject(s)||(s={});else{if(!t.isObject(i))throw new Error("A typeahead must be created with either initial models or have its collection specified in an options object");s=i}this.preInitialize.call(this,i,s),e.View.call(this,s),this.postInitialize.call(this)};s.VERSION="0.3.0",s.extend=e.View.extend,s.ItemView=e.View.extend({tagName:"li",className:"typeahead-item",events:{click:"selectItem",mouseover:"activateItem"},initialize:function(e){this.parent=e.parent},render:function(){return this.$el.html(t.template(this.template)(this.model.toJSON())),this},selectItem:function(){this.parent.selectModel(this.model)},activateItem:function(){this.parent.activateModel(this.model)}}),t.extend(s.prototype,e.View.prototype,{preInitialize:function(i,n){n.key=n.key||"name",n.limit=n.limit||8,t.isUndefined(n.collection)&&t.isArray(i)&&(n.collection=new e.Collection(i,n)),this.view=n.view,t.isUndefined(this.view)&&(this.view=s.ItemView.extend({template:n.itemTemplate||"<a><%- "+n.key+" %></a>"})),this.events=t.extend({},this.nativeEvents,t.result(this,"events")),this.options=n},postInitialize:function(){this.results=[],this.focused=!1,this.shown=!1,this.mousedover=!1},template:'<input type="text" class="form-control" placeholder="Search" /><ul class="dropdown-menu"></ul>',nativeEvents:{keyup:"keyup",keypress:"keypress",keydown:"keydown","blur input":"blur","focus input":"focus",mouseenter:"mouseenter",mouseleave:"mouseleave"},render:function(){return this.$el.html(this.template),this.$menu=this.$("ul"),this.$input=this.$("input"),this},rerender:function(e){this.$menu.empty(),t.each(e,this.renderModel,this),e.length?this.show():this.hide()},renderModel:function(e){this.$menu.append(new this.view({model:e,parent:this}).render().el)},search:function(e){var t=e.replace(/[-\/\\^$*+?.()|[\]{}]/g,"\\$&"),i=new RegExp(t,"i"),s=this.options.key;return this.collection.filter(function(e){return i.test(e.get(s))})},clearInput:function(){this.$input.val("")},searchInput:function(){this.results=this.search(this.$input.val()).slice(0,this.options.limit),this.rerender(this.results)},select:function(){var e=this.$menu.find(".active").index();this.selectModel(this.results[e])},selectModel:function(e){this.$input.val(e.get(this.options.key)),this.hide(),this.trigger("selected",e,this.collection),this.results=[]},activateModel:function(){this.$menu.find(".active").removeClass("active")},keyup:function(e){switch(e.keyCode){case 40:case 38:case 16:case 17:case 18:break;case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.searchInput()}e.stopPropagation(),e.preventDefault()},focus:function(){this.focused=!0,this.shown||this.show()},blur:function(){this.focused=!1,!this.mousedover&&this.shown&&this.hide()},mouseenter:function(){this.mousedover=!0},mouseleave:function(){this.mousedover=!1,!this.focused&&this.shown&&this.hide()},keydown:function(e){this.suppressKeyPressRepeat=~i.inArray(e.keyCode,[40,38,9,13,27]),this.move(e)},keypress:function(e){this.suppressKeyPressRepeat||this.move(e)},move:function(e){if(this.shown){switch(e.keyCode){case 9:case 13:case 27:e.preventDefault();break;case 38:e.preventDefault(),this.prevItem();break;case 40:e.preventDefault(),this.nextItem()}e.stopPropagation()}},prevItem:function(){var e=this.$menu.find(".active").removeClass("active"),t=e.prev();t.length||(t=this.$menu.find("li").last()),t.addClass("active")},nextItem:function(){var e=this.$menu.find(".active").removeClass("active"),t=e.next();t.length||(t=this.$menu.find("li").first()),t.addClass("active")},show:function(){if(this.results.length){var e=i.extend({},this.$input.position(),{height:this.$input[0].offsetHeight});return this.$menu.css({top:e.top+e.height,left:e.left}).show(),this.shown=!0,this}},hide:function(){return this.$menu.hide(),this.shown=!1,this}}),e.Typeahead=s}(Backbone,_,$); //# sourceMappingURL=backbone.typeahead.min.js.map