无法读取属性'长度'未选择多重选择自动完成

时间:2016-05-17 11:32:02

标签: javascript jquery jquery-ui

我确实有一个视图,我想在下拉列表中执行自动完成和多选数据,但我在下面的行中收到错误:

$.widget("uix.autocomplete", $.uix.autocomplete);

我的代码如下:

查看:

<script src="@Url.Content("~/Scripts/jquery-1.11.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui.min-1.11.1.js")" type="text/javascript"></script>   
<div class="columns">
    <input class="vanilla" type="text" value="" />
    <input type="text" value="" />
 </div>

JS:

(function ($, undefined) {
        if (typeof $.uix !== "object") { $.uix = {}; }
        var ac = $.ui.autocomplete.prototype;
        var _super = {
            _create: ac._create,
            _destroy: ac._destroy,
            _resizeMenu: ac._resizeMenu,
            _suggest: ac._suggest,
            search: ac.search,
            open: ac.open,
            close: ac.close
        };
        ac = $.extend({}, ac, {
            options: $.extend({}, ac.options, {
                multiselect: false,
                triggerChar: false
            }),
            _create: function () {
                var self = this,
                    o = self.options;
                _super._create.apply(self);

                if (o.multiselect) {
                    self.selectedItems = {};
                    self.multiselect = $("<div></div>")
                        .addClass("ui-autocomplete-multiselect ui-state-default ui-widget")
                        .css("width", self.element.width())
                        .insertBefore(self.element)
                        .append(self.element)
                        .bind("click.autocomplete", function () {
                            self.element.focus();
                        });

                    var fontSize = parseInt(self.element.css("fontSize"), 10);
                    function autoSize(e) {
                        // Hackish autosizing
                        var $this = $(this);
                        $this.width(1).width(this.scrollWidth + fontSize - 1);
                    };

                    var kc = $.ui.keyCode;
                    self.element.bind({
                        "keydown.autocomplete": function (e) {
                            if ((this.value === "") && (e.keyCode == kc.BACKSPACE)) {
                                var prev = self.element.prev();
                                delete self.selectedItems[prev.text()];
                                prev.remove();
                            }
                        },
                        // TODO: Implement outline of container
                        "focus.autocomplete blur.autocomplete": function () {
                            self.multiselect.toggleClass("ui-state-active");
                        },
                        "keypress.autocomplete change.autocomplete focus.autocomplete blur.autocomplete": autoSize
                    }).trigger("change");

                    // TODO: There's a better way?
                    o.select = o.select || function (e, ui) {
                        $("<div></div>")
                            .addClass("ui-autocomplete-multiselect-item")
                            .text(ui.item.label)
                            .append(
                                $("<span></span>")
                                    .addClass("ui-icon ui-icon-close")
                                    .click(function () {
                                        var item = $(this).parent();
                                        delete self.selectedItems[item.text()];
                                        item.remove();
                                    })
                            )
                            .insertBefore(self.element);

                        self.selectedItems[ui.item.label] = ui.item;
                        self._value("");
                        return false;
                    }

                    /*self.options.open = function(e, ui) {
                        var pos = self.multiselect.position();
                        pos.top += self.multiselect.height();
                        self.menu.element.position(pos);
                    }*/
                }
                return this;
            },
            _resizeMenu: function () {
                if (this.options.multiselect) {
                    var ul = this.menu.element;
                    ul.outerWidth(Math.max(
                        ul.width("").outerWidth(),
                        this.multiselect.outerWidth()
                    ));
                } else {
                    _super._resizeMenu.apply(this);
                }
            },
            _suggest: function (items) {
                var elm = this.element;
                // Override this.element with our multiselect for proper positioning
                this.element = this.options.multiselect ? this.multiselect : this.element;
                _super._suggest.apply(this, [items]);
                this.element = elm;
            },
            search: function (value, event) {
                value = value != null ? value : this._value();
                if (this.options.triggerChar) {
                    if (value.substring(0, 1) != this.options.triggerChar) {
                        return;
                    } else {
                        value = value.substring(1);
                    }
                }
                return _super.search.apply(this, [value, event]);
            },
            // Borrowed from 1.9
            _value: function (value) {
                return this.valueMethod.apply(this.element, arguments);
            },
            // Borrowed from 1.9
            valueMethod: function () {
                var result = this[this.is("input") ? "val" : "text"].apply(this, arguments);
                this.trigger("change");
                return result;
            }
        });

        $.uix.autocomplete = ac;
        $.widget("uix.autocomplete", $.uix.autocomplete);
    })(jQuery);

    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];

    var idx = 0;
    $("input:text")
        .eq(idx++).autocomplete({
            source: availableTags,
            multiselect: false
        }).end()
        .eq(idx++).autocomplete({
            source: availableTags,
            multiselect: true
        }).end()
        .eq(idx++).autocomplete({
            source: availableTags,
            multiselect: true

        });

因为$.widget("uix.autocomplete", $.uix.autocomplete);

,所以我在标题中提到了错误

0 个答案:

没有答案