Question

I’m using JQuery UI’s Autocomplete to load a list of users into a custom control and display them in the regular suggestion list. On page load, I’m calling this field’s search() method to populate the form with some initial data.

The problem is that the on page load event displays the suggestion list, as well as populating the custom control. How can I disable the suggestion list for the first query only?

I’ve tried monkey-patching various methods, and they either break or do nothing.

Of course, the alternative is setting a timeout on a function call to close it, but this will create an ugly flicker I’d like to avoid.

Answer 1

In the end, I overwrote Autocomplete’s _suggest method like so:

suggest = function(items) {
    ul = this.menu.element.empty().zIndex( this.element.zIndex() + 1 );
    this._renderMenu(ul, items);
    this.menu.deactivate();
    this.menu.refresh();

    /* these four lines are the difference between regular autocomplete and this autocomplete */
    if (!this.first)
        ul.show();
    else
        this.first = false;

    this._resizeMenu();
    args = {
        of: this.element
    }

    ul.position($.extend(args, this.options.position));

    if (this.options.autoFocus)
        this.menu.next(new $.Event("mouseover"));

/* initialisation*/
field.autocomplete().data('autocomplete').first = true;
field.autocomplete().data('autocomplete')._renderItem = renderItem;
field.autocomplete().data('autocomplete')._suggest = suggest;

It’s not the most elegant solution, but it works.