JQuery autocomplete: how to force selection from list (keyboard)

Question

I am using JQuery UI autocomplete. Everything works as expected, but when I cycle with the up/down keys on the keyboard, I notice that the textbox is filled with items in the list as expected, but when I reach the end of the list and hit the down arrow one more time, the original term that I typed shows up, which basically allows the user to submit that entry.

My question: Is there a simple way to limit the selection to the items in the list, and remove the text in the input from the keyboard selection?

eg: if I have a list that contains {'Apples (AA)', 'Oranges (AAA)', 'Carrots (A)'}, if the user types 'app', I will automatically select the first item in the list ('Apples (AA)' here), but if the user presses the down arrow, 'app' shows up again in the textbox. How can I prevent that?

Thanks.

Answer 1

for force selection, you can use "change" event of Autocomplete

        var availableTags = [
            "ActionScript",
            "AppleScript"
        ];
        $("#tags").autocomplete({
            source: availableTags,
            change: function (event, ui) {
                if(!ui.item){
                    //http://api.jqueryui.com/autocomplete/#event-change -
                    // The item selected from the menu, if any. Otherwise the property is null
                    //so clear the item for force selection
                    $("#tags").val("");
                }

            }

        });

Answer 2

Both of these other answers in combination work well.

Also, you can use the event.target to clear the text. This helps when you are adding auto-complete to multiple controls or when you don't want to type in the selector twice (maintainability issues there).

$(".category").autocomplete({
    source: availableTags,
    change: function (event, ui) {
        if(!ui.item){
            $(event.target).val("");
        }
    }, 
    focus: function (event, ui) {
        return false;
    }
});

It should be noted, however, that the even though the "focus" returns false, the up/down keys will still select the value. Cancelling this event only cancels the replacing of the text. So, "j", "down", "tab" will still select the first item that matches "j". It just won't show it in the control.

Answer 3

"Before focus is moved to an item (not selecting), ui.item refers to the focused item. The default action of focus is to replace the text field's value with the value of the focused item, though only if the focus event was triggered by a keyboard interaction. Canceling this event prevents the value from being updated, but does not prevent the menu item from being focused."

reference

On focus event:

focus: function(e, ui) {
    return false;
}

Answer 4

Define a variable

var inFocus = false; 

Add the following events to your input

.on('focus', function() {
    inFocus = true;
})
.on('blur', function() {
    inFocus = false;
})

And attach a keydown event to the window

$(window)
    .keydown(function(e){
        if(e.keyCode == 13 && inFocus) {
            e.preventDefault();
        }
    });