Clever Geek Handbook

JQuery-UI autocomplete gets stuck on initial value; does not respond to arrow keys as expected

I have items <input>

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

).

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 :

  • Load the violin and focus the entrance.
  • Now use the up and down arrow keys to try to change the value.
  • You will see only the seed value and a dropdown menu with only the seed value.
  • Now erase the value from the input and repeat step 2.
  • You will be able to fulfill all possible values ​​as with <select>

    . And you will be able to filter the values ​​by typing letters.

Ideally, in step 3, the arrow keys will not go through the possible values, but they will start at the originally entered value ( green

in this example). EG:

Desired initial behavior


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

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

I am using jQuery 2.1.0 and jQuery-UI 1.11.1.

+3


source to share


3 answers


Here's one possible solution:

  • Show all values ​​when dropdown is opened with down arrow key
  • Abandoning the 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 (for example, by clicking a button), (i) set minLength: 0

(ii) the method call search

and pass an empty string. You can implement this behavior on the textbox focus event, or add a dedicated button for this purpose.

The old demon is here

+2


source


how it should look like this when you put a value, and if that value has no match in the list, it will show nothing, if it has one or more matches, then it will display those matched values. I hope this jsfiddle helps you understand.



source: ["red", "green", "greenish", "blue", "yellow"]
+2


source


http://jsfiddle.net/v0b4ymch/2/

Pass a function for source option and don't filter results

var src = ['red', 'green', 'blue', 'yellow'];

$("#tstInp").autocomplete({
    source: function (request, response) {
        response(src);
    }
});

See this question

+2


source






More articles:


All Articles