Question

I am using JQuery UI autocomplete on my website. I am creating the auto complete object like so:

  $.widget( "custom.code_complete", $.ui.autocomplete, {
    _renderMenu: function( ul, items ) {
            var self = this,
                currentCategory = "";
        $ul = ul;
            $.each( items, function( index, item ) {
                if ( item.category != currentCategory ) {
                    ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
                    currentCategory = item.category;
                }
                self._renderItem( ul, item );
            });
        }
    });

  $("#r-code").code_complete({
    source: "URL",
    minLength: 2,
    select: function(event, ui) {
      $(".button-row").fadeIn();
      get_details(ui.item.url);
    }
  });

This setups the autocomplete field fine. I can search inside the field fine and it brings back results without a problem. Sometimes however the users will be redirected from another page with the autocomplete value set as a parameter and if this is the case the autocomplete will be triggered programmatically, I am trying to do this with the following code:

function parse_param_code(code) {
  console.log(code);
  $("#r-code").autocomplete('search', code);
}

This method is called successfully and the code is put out to the console but the autocomplete search is not triggered and does not do anything. Am I doing something wrong in my code for this not to trigger a search? I have read the JQuery UI documentation and the above code is supposed to trigger the search method. Any help would be appreciated.

Thanks

Eef

Answer 1

Changing the
$("#r-code").autocomplete('search', code);

to your own widget name, i.e:

$("#r-code").code_complete('search', code);

produces the desired result.

example: http://jsfiddle.net/vHJsu/

If you do a console.log($("#r-code").data("autocomplete")); you’ll notice there isn’t a widget with that name attached to the element.