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

Looks like you are attaching your focus() handler to the anonymous function and not the text box.

Try this:

<script type="text/javascript">
    $(function() {
        $('#id').autocomplete({
            source: ["ActionScript",
                        /* ... */
                    ],
            minLength: 0
        }).focus(function(){            
            // The following works only once.
            // $(this).trigger('keydown.autocomplete');
            // As suggested by digitalPBK, works multiple times
            // $(this).data("autocomplete").search($(this).val());
            // As noted by Jonny in his answer, with newer versions use uiAutocomplete
            $(this).data("uiAutocomplete").search($(this).val());
        });
    });
</script>

Answer 2

The generic purpose of AutoComplete is to execute on key press and based on the Letter we type it will perform often a wild-card search and show the result.

Anyway, from the code above i can see that :

focus(function(){
$(this).trigger('keydown.autocomplete');

which is attached as told by Codesleuth, to the anonymous function instead of the Control.

Answer 3

With more recent versions you might need to change autocomplete to uiAutocomplete

$(this).data("uiAutocomplete").search($(this).val());

Answer 4

$(this).trigger('keydown.autocomplete'); doesn't quite work for me.

This is what I did:

$('#id').on( "focus", function( event, ui ) {
    $(this).trigger(jQuery.Event("keydown"));
   // Since I know keydown opens the menu, might as well fire a keydown event to the element
});

Answer 5

This working right way.

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

    this._super();
  }
});

Answer 6

This directly call search method with default value when focus.

http://jsfiddle.net/steelywing/ubugC/

$("input").autocomplete({
    source: ["Apple", "Boy", "Cat"],
    minLength: 0,
}).focus(function () {
    $(this).autocomplete("search");
});