AcDropdown (List Version) [Incomplete]

Auto-Complete Dropdown plugin.

by Troy Alford

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.1/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<div style="padding: 20px;">
    <input type="text" id="box"></input>
</div>

SCSS

$iconBgImg: url(http://jqueryui.com/themeroller/images/?new=999999&w=256&h=240&f=png&fltr[]=rcd|256&fltr[]=mask|icons/icons.png);

$iconBgImgHover: url(http://jqueryui.com/themeroller/images/?new=336699&w=256&h=240&f=png&fltr[]=rcd|256&fltr[]=mask|icons/icons.png);

$borderColor: #999;
$highlight: #369;

.ac-dd-container {
    border: 1px solid $borderColor;
    display: inline-block;
    padding: 1px;
    position: relative;
    
    >.ac-dd-ctrl {
        border: 0px;
        margin: 0 20px 0 0; padding: 0;
        display: block;
        height: 100%;
        z-index: 0;
    }
    >div.ac-dd-btn {
        background-image: $iconBgImg;
        background-image-repeat: no-repeat;
        background-position: -65px -16px;
    
        position: absolute;
        z-index: 1;
        top: 2px; right: 2px;
        
        border: 1px solid darken($borderColor, 10%);
        color: darken($borderColor, 10%);
        cursor: pointer;
        display: inline-block;
        font-size: 10px;
        text-align: center;
        
        height: 16px; width: 15px;
    
        &:hover { 
            background-image: $iconBgImgHover;
            border: 1px solid #369; 
            color: #369;
        }
    }

    >.ac-dd-list {
        display: none;
    
        background-color: #fff;
        border: 1px solid $borderColor;
        border-top: 2px groove;
        padding: 1px;
        left: -2px; top: 1px;
        position: relative;
    
        >li {
            cursor: pointer;
            font-family: Verdana,Tahoma,Arial,sans-serif;
            font-size: 12px;
            padding: 4px 5px;
    
            &.nomatch { display: none; }
        }
    }
    &.ac-show-results > .ac-dd-list {
        display: block;
    }
}

JavaScript

(function($) {

    var AcItem = Backbone.Model.extend({ defaults: { Text: '', Value: 0 } });
    var AcItemList = Backbone.Collection.extend({
        model: AcItem,
        comparator: function (item) {
            return item.get('Text');
        }
    });
    
    var AcItemView = Backbone.View.extend({
        tagName: 'li',
        events: {
            'click': 'Select'
        },
        initialize: function() {
            _.bindAll(this, 'Select', 'render', 'unrender');
            
            this.model.bind('change', this.render);
            this.model.bind('remove', this.unrender);
        },
        
        Select: function() {
            this.model.trigger('Selected');
        },
        
        render: function() {
            $(this.el).html(this.model.Text);
            return this; // enables chaining
        },
        unrender: function() {
            $(this.el).remove();
        }
    });
    
    var AcDropDownList = Backbone.View.extend({
        tagName: 'div',
        className: 'ac-dd-container',
        
        Button: $('<div />'),
        ListPanel: $('<div />'),
        TextBox: $('<input type="text"></input>'),
        
        events: {
            'click div.ac-dd-btn': 'Unfilter',
            'click div.ac-dd-btn': 'ToggleDisplay',
            'keypress input.ac-dd-item': 'KeyPressed'
        },
        
        initialize: function() {
            _.bindAll(this, 'render', 'unrender', 'Filter', 'KeyPressed', 'ToggleDisplay', 'Unfilter');
            
            this.collection.bind('add', this.render);
            this.collection.bind('remove', this.render);
            
            this.render();
        },
        
        Filter: function() {
        },
        KeyPressed: function() {
        },
        ToggleDisplay: function() {
            $(this.el).toggleClass('ac-show-results');
        },
        Unfilter: function() {
        },
        
        render: function() {
            if (!this.TextBox instanceof...