jQuery-UI Autocomplete is "stuck" on the initial value; does not respond to arrow keys as expected

Question

I have <input> elements that use autocomplete and they also have initial values.
The problem is that my users expect to click on the input and use the up/down arrow keys to change those values -- just like autocomplete allows if there is no initial value (and also just like a <select> behaves).

HTML:

<label>
    Input with 4 possible values:
    <input type="text" value="green" id="tstInp">
</label>

jQuery:

$("#tstInp").autocomplete ( {
    delay: 0,
    minLength: 0,
    source: ["red", "green", "blue", "yellow"]
} )

jsFiddle:

    jsfiddle.net/v0b4ymch/

To duplicate the problem:

1. Load the fiddle and focus the input.
2. Now use the up and down arrow keys to try and change the value.
3. You will see only the initial value and a dropdown with only the initial value.
4. Now erase the value from the input and repeat step 2.
5. You will be able to cycle through all possible values, just like with a <select>. And, you will be able to filter values by typing letters.

Ideally in step 3, not only would the arrow keys cycle through the possible values, but they would start at the initially entered value (green in this example). EG:

The only difference between the expected behavior and what autocomplete currently does is that immediately after the input is focused, the initial up/down arrow keys should show all possible values -- ideally with the initial value already focused in the dropdown menu.

How can I get autocomplete to respond to the up/down arrows as expected?

---

I'm using jQuery 2.1.0 and jQuery-UI 1.11.1.

Answer 1

Here is one possible solution:

• Show all values when dropdown is opened using the down-arrow key
• Fallback to default behavior otherwise

var source = ["red", "green", "blue", "yellow"],
    showall;
$("#autocomplete1").autocomplete({
    minLength: 0,
    search: function(event, ui) {
        showall = event.which === 40;
    },
    source: function(request, response) {
        response(showall ? source : $.ui.autocomplete.filter(source, request.term));
    }
});

Demo Here

---

Original answer:

It is possible to open the dropdown and show all values manually (e.g. on click of a button) by (i) setting minLength: 0 (ii) calling search method and passing an empty string. You can ook this behavior in the focus event of the textbox or add a dedicated button for this purpose.

Old Demo Here