组合框不适合上课

时间:2016-06-01 07:32:57

标签: jquery jquery-ui combobox autocomplete

我从https://jqueryui.com/autocomplete/#combobox autocomplete组合框下载,但这只适用于id:

$("#combobox").combobox(); 

当我尝试添加class而不是id:

$(".combobox").combobox(); 

这不起作用。你能救我吗?

创建“组合框”功能的代码(从https://jqueryui.com/autocomplete/#combobox下载):

(function ($) {
    $.widget("custom.combobox", {
        _create: function () {
            this.wrapper = $("<span>")
                    .addClass("custom-combobox")
                    .insertAfter(this.element);

            this.element.hide();
            this._createAutocomplete();
            this._createShowAllButton();
        },
        _createAutocomplete: function () {
            var selected = this.element.children(":selected"),
                    value = selected.val() ? selected.text() : "";

            this.input = $("<input>")
                    .appendTo(this.wrapper)
                    .val(value)
                    .attr("title", "")
                    .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
                    .autocomplete({
                        delay: 0,
                        minLength: 0,
                        source: $.proxy(this, "_source")
                    })
                    .tooltip({
                        tooltipClass: "ui-state-highlight"
                    });

            this._on(this.input, {
                autocompleteselect: function (event, ui) {
                    ui.item.option.selected = true;
                    this._trigger("select", event, {
                        item: ui.item.option
                    });
                },
                autocompletechange: "_removeIfInvalid"
            });
        },
        _createShowAllButton: function () {
            var input = this.input,
                    wasOpen = false;

            $("<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("custom-combobox-toggle ui-corner-right")
                    .mousedown(function () {
                        wasOpen = input.autocomplete("widget").is(":visible");
                    })
                    .click(function () {
                        input.focus();

                        // Close if already visible
                        if (wasOpen) {
                            return;
                        }

                        // Pass empty string as value to search for, displaying all results
                        input.autocomplete("search", "");
                    });
        },
        _source: function (request, response) {
            var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
            response(this.element.children("option").map(function () {
                var text = $(this).text();
                if (this.value && (!request.term || matcher.test(text)))
                    return {
                        label: text,
                        value: text,
                        option: this
                    };
            }));
        },
        _removeIfInvalid: function (event, ui) {

            // Selected an item, nothing to do
            if (ui.item) {
                return;
            }

            // Search for a match (case-insensitive)
            var value = this.input.val(),
                    valueLowerCase = value.toLowerCase(),
                    valid = false;
            this.element.children("option").each(function () {
                if ($(this).text().toLowerCase() === valueLowerCase) {
                    this.selected = valid = true;
                    return false;
                }
            });

            // Found a match, nothing to do
            if (valid) {
                return;
            }

            // Remove invalid value
            this.input
                    .val("")
                    .attr("title", value + " didn't match any item")
                    .tooltip("open");
            this.element.val("");
            this._delay(function () {
                this.input.tooltip("close").attr("title", "");
            }, 2500);
            this.input.autocomplete("instance").term = "";
        },
        _destroy: function () {
            this.wrapper.remove();
            this.element.show();
        }
    });
})(jQuery);:

我的HTML:                                 some_label                                               ABC                                ...                                 

在我的jquery中(我想创建更多的组合框):

$('#addCondition').click(function () {
    var contentOfRow;
    contentOfRow = $('.my_div').html();
    $('.my_div').append(contentOfRow);
});

2 个答案:

答案 0 :(得分:2)

在您的html中,将所有课程添加到一起。像这样 -

<select class="form-inline combobox">
  <option> abc </option>
                       ...
</select>

供您参考,

当一个元素(顺便说一下是无效的HTML)多次声明属性时,行为方面第一个值将覆盖同一属性的所有后续值。因此,在这种情况下,您的元素将只有类form-inline

因此,在单个类属性中声明所有类,它应该可以工作。

答案 1 :(得分:0)

我在jsfiddle上测试您的代码 以及它在课堂上的工作。你能告诉我你正在使用哪个jquery版本并向我展示你的html结构吗?