jquery - jquery组合框上的调用方法

Question

仍在尝试找出 jQuery。我正在使用带有组合框的自动完成小部件。我需要在页面加载和选择另一个组合框时显示下拉列表。所以，我试图在组合框代码上添加自动完成搜索方法，但我不知道如何。我尝试过的方法不起作用。这是我尝试过的最后一件事。你会看到我在底部添加了搜索功能。谢谢您的帮助。

我现在收到此错误：

未捕获的错误：无法在初始化之前调用自动完成的方法；试图调用方法“搜索”

这是我的调用代码：

$("select").combobox();
$("select").combobox("search","");

这是我的小部件代码：

(function( $ ) {
$.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
          });
        },
        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( "" );
              return false;
            }
          }
        }
      })
      .addClass("ui-widget ui-widget-content ui-corner-left");

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

    $( "<button> </button>" )
    .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;
      }
      // pass empty string as value to search for, displaying all results
      input.autocomplete("search", "");
      input.focus();
    });
  },
  search: function(value) {
    this.element.autocomplete("search", value);
    this.element.focus();
  },
  destroy: function() {
    this.input.remove();
    this.button.remove();
    this.element.show();
    $.Widget.prototype.destroy.call( this );
  }
});
})( jQuery );

Answer 1

这是因为您的search方法试图在未使用autocomplete的select元素上使用，autocomplete而不是动态添加的input元素

(function($) {
    $.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
                                    });
                        },
                        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("");
                                    return false;
                                }
                            }
                        }
                    }).addClass("ui-widget ui-widget-content ui-corner-left");

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

            $("<button> </button>").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;
                                }
                                // pass empty string as value to search for,
                                // displaying all results
                                input.autocomplete("search", "");
                                input.focus();
                            });
        },
        search : function(value) {
            this.input.autocomplete("search", value);
            this.input.focus();
        },
        destroy : function() {
            this.input.remove();
            this.button.remove();
            this.element.show();
            $.Widget.prototype.destroy.call(this);
        }
    });
})(jQuery);

$("select").combobox();
$("select").combobox("search","");

演示：小提琴