Jquery元素id

Question

我有一个jquery自动完成功能。页面中的所有下拉菜单都会使用自动填充功能。我的要求是找到下拉列表的ID，点击

时触发自动完成功能

我试过$(this).attr('id')它显示未定义。任何建议如何找到id

(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();
                var id = $(this).attr('id');
                alert(id);
                // 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.data("ui-autocomplete").term = "";
        },

        _destroy: function () {
            this.wrapper.remove();
            this.element.show();
        }
    });
})(jQuery);

Answer 1

在你想要在widget方法中找到元素id，然后widget方法中的this引用小部件实例，this.element指向要绑定到小部件的元素所以试试

var id = this.element.attr('id')

---

单击处理程序this内部未引用窗口小部件实例，因此this.element可能未定义....因此您可以在self内创建闭包变量_createShowAllButton可以在点击处理程序中使用，如下所示

_createShowAllButton: function () {
    //create a closure variable which can be accessed in the click handler
    var self = this,
        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 () {
        //here this refers to the input element, not the widget so use a closure reference to the widget instance
        input.focus();
        var id = self.element.attr('id');
        alert(id);
        // Close if already visible
        if (wasOpen) {
            return;
        }

        // Pass empty string as value to search for, displaying all results
        input.autocomplete("search", "");
    });
}

Answer 2

怎么样

$（输入）.attr（ 'ID'）：

Answer 3

您可以从这里获得参考，这肯定会对您有所帮助。

http://jqueryui.com/autocomplete/