Call methods on jquery combobox-Collection of common programming errors

Still trying to figure out jQuery. I’m using the Autocomplete widget with the combobox. I have a requirement to have the drop-down list show on page load and when another combobox gets selected. So, I’m trying to add the Autocomplete search method on the combobox code and I don’t know how. What I’ve tried isn’t working. Here is the last thing I’ve tried. You’ll see I’ve added the search function at the bottom. thanks for the help.

I’m getting this error right now:

Uncaught Error: cannot call methods on autocomplete prior to initialization; attempted to call method ‘search’

Here is my calling code:

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

Here is my widget code:

(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 = $( "" )
      .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(
                    "(?![^&]+;)(?!)(?![^&]+;)", "gi"),
                  "$1"),
                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 $( "

" )
        .data( "ui-autocomplete-item", item )
        .append( "" + item.label + "" )
        .appendTo( ul );
    };

    $( " " )
    .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 );

1. It is because your search method is trying to use autocomplete on the select element where autocomplete is not used instead of the dynamically added input element

   (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 = $("").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(
                                                                   "(?![^&]+;)(?!)(?![^&]+;)",
                                                                   "gi"),
                                                           "$1"),
                                           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 $("

   ").data("ui-autocomplete-item", item)
                           .append("" + item.label + "").appendTo(ul);
               };
   
               $(" ").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","");
   

   Demo: Fiddle

Originally posted 2013-12-02 20:56:16.