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!

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.

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