0

我正在为我的下拉列表使用http://jqueryui.com/autocomplete/#combobox ，它运行良好。我的问题是当我从它后面的代码中禁用下拉列表时不起作用。

我的代码在这里。

ASPX

<asp:DropDownList runat="server" CssClass="Dropdown" ID="ddlStatus"> </asp:DropDownList>

JS

    function pageLoad() {
 /******** Auto Complete *********************/
                $(function () {
                    $("#<%= ddlStatus.ClientID %>").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
                                    });
                                    __doPostBack('<%= upnlTab.ClientID %>', this.element.attr("id"));
                                },
                                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
                            if (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 = "";
                            } else {
                                this.input.val("");
                                this.element.val("");
                                this.input.data("ui-autocomplete").term = "";
                            }
                            __doPostBack('<%= upnlTab.ClientID %>', this.element.attr("id"));
                        },

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


            }

C＃

基于一些验证，我称之为，

 ddlStatus.Enabled = false;

这里有一个答案，我不想让它与我的代码一起使用。 禁用底层 DropDownList 时禁用 jQuery ComboBox

4

1 回答 1

0

我就是这样做的。请参阅 * * 中包含的更改。

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

        this.element.hide();
        *select = this.element.hide();*                           
        this._createAutocomplete(*select*);
        this._createShowAllButton(*select*);
    },

    _createAutocomplete: function (*select*) {
        var selected = this.element.children(":selected"),
            select = this.element.hide(),
          value = selected.val() ? selected.text() : "";
        *var disabled = select.is(':disabled');*
        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")
            .*attr('disabled', disabled)*
          .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
                });
                __doPostBack('<%= upnlTab.ClientID %>', this.element.attr("id"));
            },
            autocompletechange: "_removeIfInvalid"
        });
    },

    _createShowAllButton: function (*select*) {
        var input = this.input,
          wasOpen = false;
        *var disabled = select.is(':disabled');*
        console.log(this.element.attr("id") + " : " + disabled);
        $("<a>")
          .attr("tabIndex", -1)
          *.attr('disabled', disabled)*
          //.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 () {
              *if ($(this).attr('disabled')) {
                  return false;
              }*
              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
        if (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 = "";
        } else {
            this.input.val("");
            this.element.val("");
            this.input.data("ui-autocomplete").term = "";
        }
        __doPostBack('<%= upnlTab.ClientID %>', this.element.attr("id"));
    },

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

})(jQuery);

于 2013-09-15T09:25:45.657 回答