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

<link media="all" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>

<script type="text/javascript">
    $(function() {
        $('#id').autocomplete({
            source: ["ActionScript",
                        "AppleScript",
                        "Asp",
                        "BASIC",
                        "C",
                        "C++",
                        "Clojure",
                        "COBOL",
                        "ColdFusion",
                        "Erlang",
                        "Fortran",
                        "Groovy",
                        "Haskell",
                        "Java",
                        "JavaScript",
                        "Lisp",
                        "Perl",
                        "PHP",
                        "Python",
                        "Ruby",
                        "Scala",
                        "Scheme"
                    ],
            minLength: 0
        });
    }).focus(function(){            
            $(this).trigger('keydown.autocomplete');
    });
</script>


<input type="text" id="id">

score 96 · Answer 1 · edited Sep 09 '14 at 09:24

96

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");
});

edited Sep 09 '14 at 09:24

Salman A

262,204
82
430
521

answered Jan 18 '13 at 13:47

Steely Wing

16,239
8
58
54

The chosen solution no longer works (if it ever worked at all). The [jQuery UI](https://api.jqueryui.com/autocomplete/#method-search) method "search" is the best way to manually trigger the element to display its search results. This answer works. – Matthew Mar 09 '16 at 16:25
3

Use $(this).autocomplete("search", "") if you want to show all items on focus even when the already input contains some text. – user764754 Sep 28 '16 at 17:33
True, best answer. Thanks @steely Wing – andydoe Apr 10 '17 at 17:46
Short and simple. Best answer! – Mihai Aurelian Sep 18 '19 at 16:06
For anyone trying to get it work quickly, don't forget to specify the **minLength** to **0**. Works like a charm ;) – Axel Samyn Apr 08 '22 at 15:21
Anyone knows a solution to make it work with autofocus set to true ? Rendering the JS code before the input does not seem to help – Axel Samyn Apr 08 '22 at 15:26
This no longer works but the accepted answer works perfectly ! – Yasser CHENIK Jul 25 '23 at 14:33

score 68 · Accepted Answer · edited Aug 15 '17 at 17:47

68

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>

edited Aug 15 '17 at 17:47

RayfenWindspear

6,116
1
30
42

answered Nov 09 '10 at 09:23

Codesleuth

10,321
8
51
71

1

Why the down-rate with no comment? What was it for? – Codesleuth Mar 01 '11 at 11:29
3

Anyone ever figure out how to make this work more than once? I just realized I posted a similar question: http://stackoverflow.com/questions/8206603/how-to-make-jquery-autocomplete-list-display-all-options-onfocus-and-hide-after – Michael Nov 21 '11 at 02:43
This displays the pulldown twice – sivann Sep 02 '12 at 11:44
this works only for first time, but if you replace keydown with search it works every time. i.e.: `$(this).autocomplete("search", "");` – Ahmad Nadeem Mar 13 '16 at 12:45
@AhmadNadeem Thank you, I was looking for the more modern equivalent. All the solutions here are broken in the latest versions of jQuery UI. – Extragorey May 08 '17 at 02:53
1

@AhmadNadeem - just used this and it worked for me with a space between quotes in the second argument: `$(this).autocomplete("search"," ");` The solution as it appears in the answer doesn't work in 1.12.1 – nath Jun 07 '17 at 13:23

score 61 · Answer 3 · answered Dec 08 '11 at 18:24

61

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>

answered Dec 08 '11 at 18:24

digitalPBK

2,859
25
26

9

Testing with jQuery UI 1.10.0 you need to use `.data("uiAutocomplete")` instead of `.data("autocomplete")` – Rhys Feb 17 '13 at 23:48
26

`$(this).autocomplete("search")` is suggested in the [API documentation](http://api.jqueryui.com/autocomplete/#method-search) – Lekensteyn Mar 06 '13 at 10:26
mine is jquery ui 1.9.1 and it already uses data("uiAutocomplete") instead of data("autocomplete"). please correct that on the code. – Andrade Sep 11 '13 at 17:54
This is awesome i give you up vote but what if we use catcomplete with widget? It is not working more than once for catcomplete. – Vipul Hadiya Jan 20 '15 at 13:40
This is a better answer than the previous one here. At least for me... Thanks! – TheCuBeMan Dec 07 '15 at 09:11

C.List · Answer 4 · 2012-05-09T01:29:48.177

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>

Excellent Answer! Focus event will be called multiple times and if data is huge browser will freeze. We need If condition — Peru, Nov 27 '13 at 11:55

score 9 · Answer 5 · edited Sep 12 '14 at 07:28

9

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

edited Sep 12 '14 at 07:28

Chris

44,602
16
137
156

answered Sep 12 '14 at 07:21

Ji_in_coding

1,691
1
14
17

score 6 · Answer 6 · answered Nov 23 '16 at 14:35

6

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

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

answered Nov 23 '16 at 14:35

Jonny

1,037
7
15

score 2 · Answer 7 · answered Oct 13 '15 at 00:51

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();
  }
});

score -1 · Answer 8 · answered Nov 09 '10 at 09:25

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.

score -1 · Answer 9 · answered Feb 21 '18 at 08:36

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();
  }
});

Display jquery ui auto-complete list on focus event

9 Answers9

Linked