在jQuery自動完成控件上按下轉義

Question

我有一組字段。在讀取模式下，它們在表格單元格中顯示爲文本。雙擊單元格將記錄置於編輯模式。在編輯模式下按「enter」提交更改。在編輯模式下按下「esc」將返回到讀取模式而不更改數據。

現在，每個字段都添加了一個jQuery UI自動完成控件。 當自動完成菜單可見時，我希望「輸入」的行爲與通常爲自動完成所做的一樣（將輸入中的值替換爲所選菜單值並關閉自動完成菜單）沒有提交更改/返回編輯模式。當按下轉義鍵，如果菜單打開，執行通常的自動完成功能（將編輯字段返回到先前的值並關閉菜單）沒有返回到讀取模式。

我已經放置了我的問題演示here。目前，如果您在其中一個自動完成菜單項上按下「輸入」，自動完成功能就會完成，並立即提交更改。按退出關閉自動完成菜單並取消編輯模式。

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是here。

Answer 2

您可以使用select和關閉事件重新返回到編輯模式

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/