基于Office JS API 1.3的类Outlook窗口To/CC邮箱字段自动补全功能实现咨询

嘿，针对你用Office JS 1.3+HTML+jQuery构建类Outlook窗口、实现To/CC字段自动补全的需求，我整理了一套可行的实现思路和代码示例，刚好适配你的Office 365环境：

核心思路是利用Office JS API获取用户本地/云端的联系人数据，再结合jQuery UI的Autocomplete插件实现前端输入提示——既复用了Office自带的联系人资源，又能实现和Outlook一致的补全体验。

1. 配置Office插件权限 #

首先要在你的插件manifest.xml里配置足够的权限，确保能访问用户的联系人数据：

<Permissions>ReadWriteMailbox</Permissions>

（如果只是读取联系人，ReadItem权限也足够，但ReadWriteMailbox能覆盖更多后续扩展场景）

2. 搭建HTML输入字段 #

给To和CC字段准备基础的输入控件，方便后续绑定自动补全：

<div class="recipient-container">
  <label>收件人(To):</label>
  <input type="text" id="to-recipients" class="recipient-input" placeholder="输入姓名或邮箱..." />
</div>
<div class="recipient-container">
  <label>抄送(CC):</label>
  <input type="text" id="cc-recipients" class="recipient-input" placeholder="输入姓名或邮箱..." />
</div>

3. 通过Office JS获取联系人数据 #

使用Office JS 1.3支持的getContactsAsync方法，异步获取用户的联系人列表，并整理成适合自动补全的格式：

let globalContactList = [];

// Office初始化完成后执行
Office.initialize = function(reason) {
  $(document).ready(function() {
    // 获取用户联系人（可调整count参数控制返回数量）
    Office.context.mailbox.userProfile.getContactsAsync(
      { count: 150, offset: 0 },
      function(asyncResult) {
        if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
          // 把联系人转换为{label: "姓名 <邮箱>", value: "邮箱"}的格式
          globalContactList = asyncResult.value.map(contact => ({
            label: `${contact.displayName} <${contact.emailAddress}>`,
            value: contact.emailAddress
          }));
          
          // 给To和CC字段绑定自动补全
          bindAutocomplete("#to-recipients");
          bindAutocomplete("#cc-recipients");
        } else {
          console.error("获取联系人失败: ", asyncResult.error.message);
        }
      }
    );
  });
};

4. 集成jQuery UI Autocomplete实现补全 #

封装通用的自动补全初始化函数，处理多收件人场景（支持逗号分隔）：

function bindAutocomplete(fieldSelector) {
  $(fieldSelector).autocomplete({
    source: function(request, response) {
      // 提取最后一段输入内容（处理多收件人用逗号分隔的情况）
      const inputTerm = request.term.split(/,\s*/).pop().toLowerCase();
      // 匹配姓名或邮箱包含输入内容的联系人
      const matchedContacts = globalContactList.filter(contact => 
        contact.label.toLowerCase().includes(inputTerm)
      );
      response(matchedContacts);
    },
    select: function(event, ui) {
      // 选中后替换最后一段输入为完整邮箱，保留之前的收件人
      const currentRecipients = $(this).val().split(/,\s*/);
      currentRecipients.pop();
      currentRecipients.push(ui.item.value);
      $(this).val(currentRecipients.join(", "));
      return false; // 阻止默认替换行为
    },
    focus: function() {
      // 聚焦提示项时不替换输入框内容
      return false;
    },
    minLength: 1 // 输入1个字符就触发补全
  });
}

• 样式适配：可以自定义jQuery UI Autocomplete的CSS样式，让弹窗样式更贴近Outlook的设计风格。
• 全局地址簿扩展：如果需要支持搜索公司全局地址簿，Office JS 1.3之后的版本提供了更丰富的搜索API，但1.3版本只能获取用户个人联系人。
• 错误处理：建议在生产环境中添加更完善的错误捕获逻辑，比如当获取联系人失败时，提供手动输入的 fallback 方案。

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