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

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/

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

Answer 3

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

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