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 mits the change. Pressing "esc" in edit mode returns to read mode without changing the data.

Now, each field has a jQuery UI autoplete control added. When the autoplete menu is visible, I want "enter" to behave as it normally does for autoplete (replace the value in the input with the selected menu value and close the autoplete menu) without miting the change/returning to edit mode. And when pressing escape, if the menu is open, perform the usual autoplete 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 autoplete menu items, autoplete does its thing AND the changes are mitted immediately. Pressing escape closes the autoplete menu AND cancels edit mode.

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 mits the change. Pressing "esc" in edit mode returns to read mode without changing the data.

Now, each field has a jQuery UI autoplete control added. When the autoplete menu is visible, I want "enter" to behave as it normally does for autoplete (replace the value in the input with the selected menu value and close the autoplete menu) without miting the change/returning to edit mode. And when pressing escape, if the menu is open, perform the usual autoplete 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 autoplete menu items, autoplete does its thing AND the changes are mitted immediately. Pressing escape closes the autoplete menu AND cancels edit mode.

• javascript
• jquery
• jquery-ui
• jquery-autoplete

Share Improve this question Follow edited Dec 8, 2010 at 18:14 Joel Harris asked Dec 7, 2010 at 19:03 Joel HarrisJoel Harris 1,96633 gold badges2121 silver badges3434 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Use the open and close events of the autoplete to unbind/rebind your custom behavior so that it occurs only when the autoplete 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 mitChanges() {
    $("#output").append("<div>mit</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) { mitChanges(); }    
}

$(function() {
    $("#read").bind("dblclick", enterEditMode);
    $("#edit").bind("keydown", handleKeydown).autoplete({
        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 mitChanges() {
    $("#read").text($("#edit").val());
    exitEditMode();
}

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


    });
});

Working Example:

http://jsfiddle/9unaU/6/

Update:

Made another change to ensure autoplete is hidden on exitEditMode

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

Working Example:

http://jsfiddle/9unaU/7/

Update 2: Edited the if statement so it only mits if the autoplete is hidden

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

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