My First Real jQuery Plugin - Feedback

[Gregg Bolinger]

I've written a jQuery plugin that provides a bit of simple functionality that I couldn't find in any existing plugin (I could have overlooked something). This is the first real plugin I've written and I tried my hardest to write it in a way that is truly reusable to more than just myself and the project that needed it. I blogged about it here which includes the source and a link to a crude demo. I'm also posting the code here to make it easier to review. I'd really like some feedback on how I implemented the functionality and some tips for improvement.

(function($) {
    $.fn.extend({

        filterList: function(options) {

            var defaults = {
                url:'',
                delay: 300,
                subTitle: false,
                title: 'Filter',
                showClose: false,
                rowSelected: function() { },
                rowDblClicked: function() { },
                onClose:  function() { }
            };

            var options = $.extend(defaults, options);

            return this.each(function() {
                if (options.url.length == 0) {
                    alert("Please provide a URL to the selectFilter");
                } else {
                    var obj = $(this);
                    obj.addClass('ui-widget').addClass('ui-widget-content');
                    obj.css('padding','5px 5px 5px 5px');
                    // clear out any content in the element
                    obj.html("");
                    var header = $("<div>")
                            .addClass('filter-list-header')
                            .addClass("ui-widget-header")
                            .addClass('ui-helper-clearfix')
                            .addClass("ui-corner-all")
                            .html(options.title);
                    if (options.showClose) {
                        var closeBtn = $("<div>")
                            .addClass('ui-icon')
                            .addClass('ui-icon-close')
                            .css('float', 'right');
                        closeBtn.bind('click', function(e) {
                            obj.hide(500);
                            options.onClose.call(this);
                        });
                        header.append(closeBtn);
                    }
                    // create the filter elements
                    input = $("<input id='input_filter' type='text' style='margin-bottom: 5px;margin-top: 5px;' />").addClass("ui-widget").addClass("filter-list-input");
                    select = $("<div></div>")
                            .addClass('filter-list-select')
                            .addClass("ui-widget-content")
                            .addClass("ui-widget")
                            .addClass("ui-corner-all")[0];
                    var img = $("<div class='ui-icon-search ui-icon filter-list-image' title='Click to reset'>")
                            .css('margin-top', '3px');
                    // bind the resetFilter function to the filter image container
                    img.bind('click',  resetFilter);
                    var filterContainer = $("<div>");
                    filterContainer.append(img).append(input);

                    obj.append(header);
                    obj.append(filterContainer);
                    obj.append(select);
                    
                    // call our filter function
                    $.fn.filterList.filterselect(input, select, options)
                }
            });

             function resetFilter() {
                input.val("");
                $(select).html("");
            }
        }
    });

    $.fn.filterList.filterselect = function(input, select, options) {
        var prevLength = 0;
        var timeout = false;
        if ($.browser.mozilla) {
            input.keypress(processKey);
        } else {
            input.keydown(processKey);
        }

        function processKey(e) {
            if (input.val().length != prevLength) {
                if (timeout) {
                    clearTimeout(timeout);
                }
                timeout = setTimeout(filter, options.delay);
                prevLength = input.val().length;
            }

            function filter() {
                if ($.trim(input.val()).length > 0) {
                    $(select).html("");
                    $.getJSON(options.url, {name:input.val()}, function(data) {
                        $.each(data, function(index, optionData) {
                            var row = $("<div>").addClass('filter-list-row').addClass("ui-state-default").attr("id", optionData.value);
                            var caption = $("<div>").html(optionData.caption).addClass('filter-list-caption');
                            row.append(caption);
                            if (options.subTitle) {
                                var subTitleData = $("<div>").html(optionData.subTitle).addClass('filter-list-subtitle');
                                row.append(subTitleData);
                            }
                            row.hover(
                                    function () {
                                        $(this).addClass("ui-state-hover");
                                    },
                                    function () {
                                        $(this).removeClass("ui-state-hover");
                                    }
                                  );

                            row.bind('click', selectRow);
                            row.bind('dblclick', dblClickRow);
                            

                            $(select).append(row);
                        });
                    });
                } else {
                    $(select).html("");
                }
            }

            function selectRow() {
                options.rowSelected.call(this);
            }

            function dblClickRow() {
                options.rowDblClicked.call(this);
            }
        }
    }

})(jQuery)