Question

http://jsfiddle.net/BbWza/1193/

           $.widget("ui.combobox", {
            _create: function () {
                var self = this;
                var select = this.element.hide(),
                  selected = select.children(":selected"),
                  value = selected.val() ? selected.text() : "";
                var input = $("<input />")
                  .insertAfter(select)
                  .val(value)
                  .autocomplete({
                      delay: 0,
                      minLength: 0,
                      source: function (request, response) {
                          var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                          response(select.children("option").map(function () {
                              var text = $(this).text();
                              if (this.value && (!request.term || matcher.test(text)))
                                  return {
                                      label: text.replace(
                                        new RegExp(
                                          "(?![^&;]+;)(?!<[^<>]*)(" +
                                          $.ui.autocomplete.escapeRegex(request.term) +
                                          ")(?![^<>]*>)(?![^&;]+;)", "gi"),
                                        "<strong>$1</strong>"),
                                      value: text,
                                      option: this
                                  };
                          }));
                      },
                      select: function (event, ui) {
                          ui.item.option.selected = true;
                          self._trigger("selected", event, {
                              item: ui.item.option
                          });

                          var event;
                          if (document.createEvent) {
                              event = document.createEvent("HTMLEvents");
                              event.initEvent("combochange", true, true);
                          } else {
                              event = document.createEventObject();
                              event.eventType = "combochange";
                          }
                          event.eventName = "combochange";

                          if (document.createEvent) {
                              self.element[0].dispatchEvent(event);
                          } else {
                              self.element[0].fireEvent("on" + event.eventType, event);
                          }

                      },
                      change: function (event, ui) {

                          if (!ui.item) {
                              var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
                              valid = false;
                              select.children("option").each(function () {
                                  if (this.value.match(matcher)) {
                                      this.selected = valid = true;
                                      return false;
                                  }
                              });
                              if (!valid) {
                                  // remove invalid value, as it didn't match anything
                                  $(this).val("");
                                  select.val("");
                                  input.data("autocomplete").term = "";
                                  return false;
                              }
                          }
                      },

                  })
                  .addClass("ui-widget ui-widget-content ui-corner-left");

                input.data("autocomplete")._renderItem = function (ul, item) {
                    return $("<li></li>")
                      .data("item.autocomplete", item)
                      .append("<a>" + item.label + "</a>")
                      .appendTo(ul);
                };

                $("<span> </span>").attr("tabIndex", -1).attr("title", "Show All Items").insertAfter(input).button({
                    icons: {
                        primary: "ui-icon-triangle-1-s"
                    },
                    text: false
                }).removeClass("ui-corner-all").addClass("ui-corner-right ui-button-icon").click(function () {
                    // close if already visible
                    if (input.autocomplete("widget").is(":visible")) {
                        input.autocomplete("close");
                        return;
                    }

                    $(this).blur();
                    // pass empty string as value to search for, displaying all results
                    input.autocomplete("search", "");
                    input.focus();
                });
            },
            destroy: function () {
                this.input.remove();
                this.button.remove();
                this.element.show();
                $.Widget.prototype.destroy.call(this);
            }

        });

$('#combobox').combobox();


$('#clicky').click(function() {
        $('#combobox').combobox('destroy');


});

正如您在点击“销毁”组合时所看到的那样。按钮它不会破坏，我做错了什么？我确信你只需要将其称为$（＆＃39;＃combobox＆＃39;）。combobox（＆＃39; destroy＆＃39;）;我不确定某些事情是否阻止了电话的发生。真的很感激任何帮助！

Answer 1

你是在正确的道路上，只是没有正确地调用特定物体。

工作示例：http://jsfiddle.net/Twisty/BbWza/1195/

destroy: function() {
  console.log("Bye bye.");
  this.element.next("input[role='textbox']").remove();
  this.element.next("span[role='button']").remove();
  this.element.show();
  $.Widget.prototype.destroy.call(this);
}

当您致电销毁时，this.element是原始select元素。因此，我们查看已创建的下一个项目，然后将其删除。

希望有所帮助。

Jquery Autocomplete Combobox不会摧毁

1 个答案: