jquery-ui autocomplete does not select on enter

Question

I have used the jquery-ui to autocomplete an input box and set a hidden value from the selected item.

This I did using the

 select: function(event, ui) { ...$("#myDiv").val(ui.item.value)... } 

option (might be wrong now, don't have the code at hand, but it works up until my question...)

It works when select an item from the menu with the mouse, however if I just enter some text and choose an item with Enter - it does not do anything, it is as if the select is not run at all by the autocomplete function. However, tabbing out of the box triggers the select.

I have used a focus and change: to also update the fields I want, but I think this is overkill, should it really be necessary to specify all of focus, change and select, just to be sure that however a user selects an item from the list it will actually be selected.

Thank you.

rofly: I am using the jquery-ui autocomplete, it has the code you give, but it looks like this (from the jquery.ui.autocomplete.js)

case keyCode.ENTER:
                case keyCode.NUMPAD_ENTER:
                    // when menu is open or has focus
                    if ( self.menu.active ) {
                        event.preventDefault();
                    }
                    //passthrough - ENTER and TAB both select the current element
                case keyCode.TAB:
                    if ( !self.menu.active ) {
                        return;
                    }
                    self.menu.select( event );
                    break;

That looks all dandy, so Im not sure if it fails because of this.

My code is like this (wrapped in document.read()

$("#someDiv").attr("autocomplete", 'off');
$("#someDiv").autocomplete({
source: function(request, response) {
if ( request.term in cache ) {
response( cache[ request.term ] );
return;
}
$.ajax({
url: "giveMeJSON.jsp",
dataType: "json",
data: request,
success: function( data ) {
cache[ request.term ] = data;
response( data );
}
})},
minLength: 1,
delay: 300,
select: function(event, ui) {
$("#someDiv").val(ui.item.label);
$("#hiddenDiv").val(ui.item.value);
}
});

so, the problem is, this works when the user is selecting from the menu with the mouse AND when tabbing out of the field (keyUp,keyDown to choose then tab out, works) but keyUp,keyDown to choose itme, then enter, and nothing happens!

Pennipennie

if you set an hidden input it has a weird id myDiv.... maybe change: function(event, ui) { ...$("#myDiv").val(ui.item.value)... } works – Pia

Answer 1

A similar instance works for me with jQuery 1.4.2 and jQuery-ui 1.8.7. One caveat, Enter only appears to work when selecting an item from the list. If you are creating a new entry that does not exist, pressing Enter will not trigger select or change events. I had to bind a separate event handler to make that situation fly.

Viewing

Here is the exact code that I am using to capture the Enter key. $("#yourAutoComplete").keypress(function (e) { if (e.which == 13) { yourFunction($('#yourAutoComplete').val()); return false; } } Hope that helps! – Viewing

Take a look at @iamct 's answer! Autofocus makes the first item have focus, and thus enter key selects it! – Imperator

Answer 2

This worked for me where I was submitting a form after auto completing.

    $("input#searchbox").autocomplete({
  source: autocomplete,
  select: function(event, ui) {  }
    $("input#searchbox").val(ui.item.value);
    $("#searchform").submit();
  }
})

From Search on Click with Jquery's Autocomplete

Biplane

Answer 3

have this param? set
autoFocus: true

See answer here: https://mcmap.net/q/516070/-select-first-jquery-ui-result-automatically

Crenulate

This was exactly what I was looking for, shame that this is not the accepted answer! – Imperator