Display jquery ui auto-complete list on focus event

Question

here is my code, anything wrong with it ? it doesn\'t seem to display list on focus, i still have to press a key before it displays list

Answer 1

The solution to make it work more than once

<script type="text/javascript">
    $(function() {
        $('#id').autocomplete({
            source: ["ActionScript",
                        /* ... */
                    ],
            minLength: 0
        }).focus(function(){     
            //Use the below line instead of triggering keydown
            $(this).data("autocomplete").search($(this).val());
        });
    });
</script>

Answer 2

If you want to change something about jQuery UI, do it jQuery UI way.

Utilize jQuery UI Widget Factory. It's easier to maintain, faster, and much cleaner than attaching events to element.

$.widget('custom.autocomplete', $.ui.autocomplete, {
  options: {
    minLength: 0
  },
  _create: function() {
    this._on(this.element, {
      focus: function(event) {
        this.search();
      }
    });

    this._super();
  }
});

Answer 3

digitalPBK almost has it right...

His solution works more than once but doesn't close the drop list when you select an item from the list with a mouse-click. In that case, the focus goes back to the control when you do the click, so it re-opens the list when it should be closing it.

Here's a fix, and it's the only that works for me the way I think it should work when using the latest version right now (1.8.11) of the autocomplete() function. When the control receives the focus, it doesn't do the display-all-on-focus if the drop-list is already shown...

<script type="text/javascript"> 
    $(function() {
        $('#id').autocomplete({
            source: ["ActionScript",
                        /* ... */
                    ],
            minLength: 0
        }).focus(function () {
            if ($(this).autocomplete("widget").is(":visible")) {
                return;
            }
            $(this).data("autocomplete").search($(this).val());
        });
</script>