使用JqueryUI写的combobox插件

(function ($) {
    $.widget("ui.combobox", {
        Version: "1.4",
        options: {
            SelectOnly:true,//是否只能选择数据源中的
            config: {
                lableName: "选项",
                tdWidth: 80,
                showHeader: true
            }
            
        },
        _create: function () {
            var self = this;
            this.target = this.element//.css({height:"1.2em",""}),
            value = this.target.val() ? this.target.text() : "";
            this.wrapper = $("<span>")
            .addClass("ui-combobox")
            .css("z-index","99")
            .appendTo($(this.target).parent())
            .append(this.target);
            this._createAutocomplete(this.target);
            this._createShowAllButton(this.target);
        },
        _createAutocomplete: function (target) {
            this.input=this.element
            .appendTo(this.wrapper)
            .attr("title", "")
         
            .addClass("ui-state-default ui-combobox-input ui-widget-content ui-corner-left")
            .live("keydown", function (event) {
                if (target.combobox("option", "multiple")
                    && $(this).val().length > 0
                    && $(this).val().substr($(this).val().length - 1) != ","
                    && event.keyCode!=13) 
                {
                        var terms = $(this).val().split(/,\s*/);
                        var term
                        if (terms.length > 1 ) {
                            term = terms.splice(terms.length - 1, 1)[0];
                            target.autocomplete("search", term);
                            
                        } event.preventDefault();
                }
                if (target.combobox("option", "source")) {
                    target.autocomplete("option", "source", target.combobox("option", "source"))
                }

            })
            .autocomplete({
                delay: 0,
                minLength: 1,
                source: target.combobox("option", "source"),
                open: function (event, ui) {
                    target.autocomplete("option", "minLength", "1");
                    target.data("ui-autocomplete")._renderItem = function (ul, item) {
                        $(ul).css("z-index", "99")
                        return $("<li>")
                        .append("<a>" + item.label + "</a>")
                        .appendTo(ul);
                    }
                },
                select: function (event, ui) {
                    if (!target.combobox("option", "multiple")) {
                        this.value = ui.item.value;
                    } else {
                        var terms = this.value.split(/,\s*/);
                        var count = terms.length;
                        if (this.value.substr(this.value.length - 1) != ",")
                            count--;
                        if (terms[count-1]=="") {
                            count--;
                        }
                        // remove the current input
                        terms = terms.splice(0, count);

                        // add the selected item
                        terms.push(ui.item.value);
                        // add placeholder to get the comma-and-space at the end
                        if (count == 0) {
                            this.value = terms[0]+",";
                        } else {
                            this.value = terms + ",";

                        }

                          //  this.value =terms;
                    }
                    if (target.combobox("option", "AfterSelect")) {
                        var afterSelect = target.combobox("option").AfterSelect(event, ui)
                       // $.proxy(afterSelect, event, ui);
                    }
                    return false;
                },
                focus: function (event, ui) {
                    if (target.combobox("option", "multiple")) {
                        return false;

                    }
                }
                //option: $.proxy(this, "_option")

            })
            this._on(this.target, {
                autocompletechange: "_removeIfInvalid"
            });

        },
        AfterSelect: function () {
    
        },
        _removeIfInvalid:function( event, ui ) {
        // Selected an item, nothing to do
        if ( ui.item ) {
            return;
        }
            // Search for a match (case-insensitive)
            var value = this.target.val(),
            valueLowerCase = value.toLowerCase(),
            valid = false;
           
            var source = this.target.autocomplete("option", "source");
            if (!source) {
                this.target.click();
                source = this.target.autocomplete("option", "source");
            }
            for (var i = 0; i < source.length; i++) {
                if (source[i].value.toLowerCase() === valueLowerCase) 
                    valid = true;
            }
       
            // Found a match, nothing to do
            if (valid && this.target.combobox("option", "SelectOnly")) {
                return;
            }
            // Remove invalid value
            this.target.tooltip();
            this.target
            .val( "" )
            .attr( "title", value + "不是可選項！請重新輸入！" )
            .tooltip( "open" );
            this.target.val("");
            this._delay(function() {
                this.target.tooltip("close").attr("title", "");
            }, 2500 );
            this.target.data("ui-autocomplete").term = "";
            this.target.focus();
        },
        _createShowAllButton: function (target) {
          
            $("<a>")
            .attr("tabIndex", -1)
            //.attr("title", "Show All Items")
            //.tooltip()
            .appendTo(this.wrapper)
            .button({
                icons: {
                    primary: "ui-icon-triangle-1-s"
                },
                text: false
            })
            .removeClass("ui-corner-all")
            .addClass("ui-corner-right ui-combobox-toggle")
            .mousedown(function () {
               // wasOpen = input.autocomplete("widget").is(":visible");
            })
            .click($.proxy(this._click,this));
        },
        _click: function () {
            var lableName = this.target.combobox("option", "config").lableName;
            var showHeader = this.target.combobox("option", "config").showHeader;
            var tdWidth = this.target.combobox("option", "config").tdWidth;
                this.target.focus();
            // Close if already visible
                if (this.target.combobox("option", "source")) {
                    this.target.autocomplete("option", "source", this.target.combobox("option", "source"))
                }
                this.target.autocomplete("option", "minLength", "0");
            // Pass empty string as value to search for, displaying all results
                var targetWidth = parseInt(this.target.parent().width());
                this.target.data("ui-autocomplete")._renderItem = function (ul, item) {
                    var str = decodeURIComponent($.param(item));

                    var list = str.split("&");
                    var tab_width = ((list.length - 1) * tdWidth);

                    if (list.length==2) {
                        tab_width = targetWidth+"px";
                    } else {
                        tab_width = tab_width + "px";
                    }
                    if ($(ul).html() == "" && showHeader) {
                      
                        var li = "<li><table class='ui-combobox-table' style='margin-left:4px;width:" + tab_width + "' ><tr>";
                        var width = parseInt(100 / (list.length-1));
                        for (var i = 0; i < list.length; i++) {
                            var text = list[i].split("=");
                            var name = text[0];
                            var value = text[1] == "" ? " " : text[1];

                            if (name != "value") {
                                li = li + "<td style='width:" + width + "%;padding-left:0.4em' name=" + name + ">" + (name == "label" ? lableName : name) + "</td>";
                            }
                        }
                        li = li + "</tr></table></li>";

                         $(li).appendTo(ul);
                    }
               
                 
                    var li = "<li><a><table class='ui-combobox-table' style='width:" + tab_width + "' ><tr>";
                    var width = parseInt(100 / (list.length-1));
                    for (var i = 0; i < list.length; i++) {
                        var text = list[i].split("=");
                        var name = text[0];
                        var value = text[1] == "" ? " " : text[1];

                        if (name != "value") {
                                li = li + "<td style='width:" + width + "%;' name=" + name + ">" + value + "</td>";
                        }
                    }
                    li = li + "</tr></table></a></li>";
                    $(ul).css({ "z-index": "99" })
                    return $(li)
                    .appendTo(ul);
                }
                this.target.autocomplete("search", "");
            },
        _setOptions: function () {
            // _super and _superApply handle keeping the right this-context
            this._superApply(arguments);

        },
        _setOption: function (optionName, value) {
            if (optionName == "source") {
                this.input.autocomplete("option", optionName, value);
            } else {
                if (jQuery.isPlainObject(value)) {
                    var empty = {}
                    jQuery.extend(empty, this.target.combobox("option", optionName), value);
                    this._super(optionName, empty);
                } else {
                    this._super(optionName, value);

                }
            }
           
        }
       
    });
})(jQuery);

 自己写的也没有什么规范