在 jquery 自动完成控件上按 escape

Question

我有一组字段。在阅读模式下，它们在表格单元格中显示为文本。双击单元格会将记录置于编辑模式。在编辑模式下按“enter”即可提交更改。在编辑模式下按“esc”返回读取模式而不更改数据。

现在，每个字段都添加了 jQuery UI 自动完成控件。 当自动完成菜单可见时，我希望“输入”的行为与自动完成通常的行为相同（将输入中的值替换为选定的菜单值并关闭自动完成菜单）不< /strong> 提交更改/返回编辑模式。当按下退出键时，如果菜单打开，则执行通常的自动完成功能（将编辑字段返回到其先前的值并关闭菜单）而不返回到阅读模式。

我已在此处放置了我的问题的演示。目前，如果您在自动完成菜单项之一上按“enter”键，自动完成功能就会完成它的工作，并且更改会立即提交。按 escape 关闭自动完成菜单并取消编辑模式。

Answer 1

使用自动完成的打开和关闭事件来取消绑定/重新绑定您的自定义行为，以便仅在自动完成菜单未打开时才发生。这将使事件不会变得混乱。我的工作代码如下：

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); }
    });
});

工作jsfiddle位于此处。

Answer 2

您可以使用选择和关闭事件来租用编辑模式

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

，它们位于您的代码中：

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()}


    });
});

工作示例：

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

更新：

进行了另一项更改，以确保在 exitEditMode 上隐藏自动完成

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

功能 工作示例：

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

更新 2：
编辑了 if 语句，以便仅在隐藏自动完成功能时才提交

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

工作示例 2：
http://jsfiddle.net/9unaU/10/