如何触发sap.m.ComboBox已选中项的selectionChange事件？

1. 触发已选中项的selectionChange事件 #

sap.m.ComboBox默认仅在选中项发生变化时触发selectionChange，要对已选中项再次触发该事件，可通过以下两种方式实现：

方式1：手动监听点击/键盘事件，主动触发事件 #

通过监听ComboBox的点击或键盘操作，判断用户选中的是当前已选项，然后调用fireSelectionChange方法手动触发事件：

// 获取ComboBox实例
const oComboBox = this.byId("yourComboBoxId");

// 监听点击事件（处理鼠标点击已选项的场景）
oComboBox.getDomRef().addEventListener("click", (e) => {
  const oSelectedItem = oComboBox.getSelectedItem();
  if (!oSelectedItem) return;
  // 判断点击的DOM元素是否对应已选中的列表项
  const oClickedItemDom = e.target.closest(".sapMComboBoxItem");
  if (oClickedItemDom === oSelectedItem.getDomRef()) {
    // 手动触发selectionChange，传递必要参数
    oComboBox.fireSelectionChange({
      selectedItem: oSelectedItem,
      selectedKey: oSelectedItem.getKey(),
      selectedText: oSelectedItem.getText()
    });
  }
});

// 监听键盘事件（处理回车/空格选中已选项的场景）
oComboBox.attachKeyDown((e) => {
  const oSelectedItem = oComboBox.getSelectedItem();
  const sPressedKey = e.getParameter("key");
  // 回车或空格触发选中操作时，判断当前高亮项是否为已选项
  if ((sPressedKey === "Enter" || sPressedKey === "Space") && oSelectedItem) {
    const oHighlightedItem = oComboBox.getHighlightedItem();
    if (oHighlightedItem && oHighlightedItem.getKey() === oSelectedItem.getKey()) {
      oComboBox.fireSelectionChange({
        selectedItem: oSelectedItem,
        selectedKey: oSelectedItem.getKey(),
        selectedText: oSelectedItem.getText()
      });
    }
  }
});

方式2：扩展ComboBox控件，重写选择逻辑 #

如果需要全局生效，可自定义扩展sap.m.ComboBox，重写handleSelectionChange方法，移除原逻辑中“选中项未变化则不触发事件”的判断：

sap.ui.define(["sap/m/ComboBox"], (ComboBox) => {
  return ComboBox.extend("your.namespace.CustomComboBox", {
    handleSelectionChange: function(oEvent) {
      const oSelectedItem = oEvent.getParameter("selectedItem");
      // 直接触发selectionChange，不判断是否与当前选中项一致
      this.fireSelectionChange({
        selectedItem: oSelectedItem,
        selectedKey: oSelectedItem?.getKey(),
        selectedText: oSelectedItem?.getText()
      });
      // 保留原控件的其他逻辑
      ComboBox.prototype.handleSelectionChange.call(this, oEvent);
    }
  });
});

2. 通过input事件获取自动补全文本 #

若无法触发selectionChange，可直接监听ComboBox输入框的input事件来捕获自动补全后的文本：

使用SAPUI5控件事件 #

const oComboBox = this.byId("yourComboBoxId");
// 获取ComboBox内部的Input控件
const oInput = oComboBox.getInput();

// 监听Input的input事件
oInput.attachInput((e) => {
  const sAutoCompletedValue = e.getParameter("value");
  // 此处可获取自动补全后的文本（如输入A后补全的ABCD）
  console.log("自动补全文本：", sAutoCompletedValue);
});

使用原生DOM事件 #

如果需要更底层的监听，可直接操作输入框的DOM元素：

const oComboBox = this.byId("yourComboBoxId");
const oInputDom = oComboBox.getInput().getDomRef();

oInputDom.addEventListener("input", (e) => {
  const sAutoCompletedValue = e.target.value;
  console.log("自动补全文本：", sAutoCompletedValue);
});

注意：自动补全的时机由SAPUI5的ComboBox内部逻辑控制，input事件会在文本变化时立即触发，可确保捕获到最新的补全结果。

内容的提问来源于stack exchange，提问作者cfwithdecaf