0

我有一个问题，我在自动回发设置为 true 的更新面板内使用 asp.net 下拉列表。这是我的下拉列表：

<asp:DropDownList runat="server" ID="dropdownFacility" AutoPostBack="true" OnSelectedIndexChanged="Facility_SelectionChanged" />

在我的更新面板中，更新模式设置为有条件的，我有这个作为触发器：

<asp:AsyncPostBackTrigger ControlID="dropdownFacility" EventName="SelectedIndexChanged" />

问题是当我将下拉列表变成 JQuery Combobox时，自动回发功能不起作用。我在没有应用 JQuery 组合框功能的情况下对其进行了测试，然后自动回发确实起作用了。我基本上从上面的链接中获取了他们的脚本代码并将其应用到我的下拉列表中：

(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.data("ui-autocomplete").term = "";
        },

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

有谁知道如何使用 JQuery 组合框代码实现自动回发功能？谢谢！！

4

1 回答 1

0

这可能是一个迟到的答复。可能会节省您的时间。

从下拉列表中删除 OnSelectedIndexChanged

<asp:DropDownList runat="server" ID="dropdownFacility" />

您可以在下拉列表项更改时调用 _doPostback 事件， 

__doPostBack('<%= upnl.ClientID %>', this.element.attr("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
                    });

                    __doPostBack('<%= upnl.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('<%= upnl.ClientID %>', this.element.attr("id"));
        },

        _destroy: function () {
            this.wrapper.remove();
            this.element.show();
        }
    });
})(jQuery);
于 2013-09-20T07:03:20.277 回答