EasyUI Combobox 綁定回車鍵與單擊事件的正確姿勢

問題描述

在 EasyUI 框架中，Combobox 控件預設不直接支援回車鍵與單擊事件的綁定，開發者常需自行配置以實現鍵盤導航與選項點擊響應。

解決方案

EasyUI Combobox 提供兩個關鍵配置屬性：

• keyHandler：處理鍵盤事件（如回車、方向鍵）。
• onSelect：處理選項被選中時的點擊事件。

keyHandler 詳細配置

keyHandler: {
    up: function(e) {},      // 向上鍵
    down: function(e) {},    // 向下鍵
    left: function(e) {},    // 向左鍵
    right: function(e) {},   // 向右鍵
    enter: function(e) {     // 回車鍵 - 核心邏輯在這裡
        // 例如：觸發查詢、提交表單等
        var value = $(this).combobox('getValue');
        console.log('回車選中值:', value);
    },
    query: function(q, e) {} // 搜尋過濾時觸發
}

onSelect 事件綁定

$('#comboboxId').combobox({
    onSelect: function(record) {
        // record 為當前選中的選項物件 {value: '', text: ''}
        alert('選中了: ' + record.text);
        // 可在此觸發後續業務邏輯
    }
});

完整初始化範例

$('#myCombobox').combobox({
    valueField: 'id',
    textField: 'text',
    data: [
        {id: 1, text: '選項一'},
        {id: 2, text: '選項二'},
        {id: 3, text: '選項三'}
    ],
    keyHandler: {
        enter: function(e) {
            var val = $(this).combobox('getValue');
            $('#searchBtn').click(); // 模擬點擊查詢按鈕
        }
    },
    onSelect: function(record) {
        console.log('用戶點擊選中:', record.text);
    }
});

注意事項

1. keyHandler 必須在 Combobox 初始化時配置，動態添加可能不生效。
2. enter 事件中若需獲取當前輸入框值，可用 $(this).combobox('getText')（編輯模式）或 getValue()（非編輯模式）。
3. 若 Combobox 設定 editable: true，回車鍵行為可能受瀏覽器默認表單提交影響，需在 enter 中調用 e.preventDefault()。