Pressing escape on a jquery autocomplete control

I have a set of fields. In read mode, they display as text within a table cell. Double clicking the cell puts the record in edit mode. Pressing "enter" while in edit mode commits the change. Pressing "esc" in edit mode returns to read mode without changing the data.

Now, each field has a jQuery UI autocomplete control added. When the autocomplete menu is visible, I want "enter" to behave as it normally does for autocomplete (replace the value 开发者_运维知识库in the input with the selected menu value and close the autocomplete menu) without commiting the change/returning to edit mode. And when pressing escape, if the menu is open, perform the usual autocomplete functions (return the edit field to its previous value and close the menu) without returning to read mode.

I have placed a demo of my problem here. Currently, if you press "enter" on one of the autocomplete menu items, autocomplete does its thing AND the changes are committed immediately. Pressing escape closes the autocomplete menu AND cancels edit mode.

Use the open and close events of the autocomplete to unbind/rebind your custom behavior so that it occurs only when the autocomplete menu is not open. This will keep the events from getting confused. My working code follows:

function enterEditMode() {
    $("#output").append("<div>enter edit</div>");
    $("#read").hide();
    $("#edit").val($("#read").text()).show().focus();
}

function exitEditMode() {
    $("#output").append("<div>exit edit</div>");
    $("#read").show();
    $("#edit").hide();
}

function commitChanges() {
    $("#output").append("<div>commit</div>");
    $("#read").text($("#edit").val());
    exitEditMode();
}

function handleKeydown(event) {    
    $("#output").append("<div>handle keydown:"+event.which+"</div>");
    if (event.keyCode === 27) { exitEditMode(); }
    else if (event.keyCode === 13) { commitChanges(); }    
}

$(function() {
    $("#read").bind("dblclick", enterEditMode);
    $("#edit").bind("keydown", handleKeydown).autocomplete({
        source: ["this", "that", "the other"],
        open: function(){ $("#edit").unbind("keydown", handleKeydown); },
        close: function(){ $("#edit").bind("keydown", handleKeydown); }
    });
});

The working jsfiddle is here.

You can use the select and close events to renter edit mode

  close: function(event, ui) { enterEditMode()},
  select: function(event, ui) { enterEditMode()}

Here they are in your code:

function enterEditMode() {
    $("#read").hide();
    $("#edit").show().focus();
}

function exitEditMode() {
    $("#read").show();
    $("#edit").hide();
}

function commitChanges() {
    $("#read").text($("#edit").val());
    exitEditMode();
}

$(function() {
    $("#read").dblclick(enterEditMode);
    $("#edit").keydown(function(event) {
        if (event.keyCode === 27) exitEditMode();
        else if (event.keyCode === 13) commitChanges();
    }).autocomplete({
        source: ["this", "that", "the other"],
          close: function(event, ui) { enterEditMode()},
         select: function(event, ui) {  enterEditMode()}


    });
});

Working Example:

http://jsfiddle.net/9unaU/6/

Update:

Made another change to ensure autocomplete is hidden on exitEditMode

function exitEditMode() {
    $("#read").show();
    $("#edit, .autocomplete").hide();
}

Working Example:

http://jsfiddle.net/9unaU/7/

Update 2: Edited the if statement so it only commits if the autocomplete is hidden

if (event.keyCode === 27) exitEditMode();
        else if (event.keyCode === 13 && ($('.autocomplete').is(':hidden'))) commitChanges();

Working Example 2: http://jsfiddle.net/9unaU/10/