jQuery UI Autocomplete autoFocus not working

Question

I am using jQuery UI autocomplete and trying to implement the autoFocus option.

The documentation states the following: If set to true the first item will be automatically focused.

I created a basic example and cannot get to work. I must be missing something obvious. See here: http://jsfiddle.net/9bQJX/

$("#autocomplete").autocomplete({
    source: [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ],
    autoFocus: true
});

Cynical

Are you getting an error? What's not working? – Indignation

It isn't auto Focusing on the first item in the list. According to autoFocus it should do it. – Cynical

Unfortunately I don't see anything wrong with your code and the use of the autoFocus property. I can't even get there own demos to work with it... your best bet is to use my answer and set focus on the element you want focused on load. In reality it's actually less characters typed to achieve the same effect so your not losing out on anything by doing it that way. – Currish

Here is the same in fiddle: jsfiddle.net/B5XkY/8 – Nissen

Answer 1

You're using an old version of jQueryUI (1.8.9). The option works fine with 1.8.16. In fact, according to the changelog, the autoFocus option was added in 1.8.11, so you should be good with any version >= 1.8.11.

See an updated example using 1.8.16: http://jsfiddle.net/Bqujj/

Oliguria

@elvenbyte: Here's an example using the latest version: jsfiddle.net/Bqujj/60 – Oliguria

I'll put my own question with the code I'm trying to make work, just to not overfill this thread. Thanks a lot. – Blubbery

This doesn't work when using android device with (eg) Chrome browser and if the autoFocus element is not the last element in the form. eg: jsfiddle.net/Bqujj/221. Any suggestions? – Stain

Answer 2

Open Jquery-ui.js file and search for "autocomplete". Change "autoFocus" to "true". e.g.

$.widget ( "ui.autocomplete", {
   version: "1.12.1",
   ...
   ...
   options: {
      ...
      ...
      autoFocus: true,
      ...
      ...

Screen shot of config

Amplexicaul

Answer 3

keep autoFocus = true, before source option. eg like below.

$("#autocomplete").autocomplete({
    **autoFocus : true,**
    source: [
        "ActionScript",
        "AppleScript"
    ]
})

Picaresque

This will make absolutely no difference. – Oliguria