如何基于特定词汇对Materialize CSS Autocomplete的Google联系人数据进行排序

我来帮你搞定这个排序需求！核心是先实现一个自定义排序逻辑，再把它正确应用到Materialize的Autocomplete组件里。下面是一步步的解决方案：

1. 从Google联系人获取数据（Google Apps Script端） #

首先写个GAS函数拉取所有联系人的全名，处理可能的空值情况：

function getContactNames() {
  const contacts = ContactsApp.getContacts();
  return contacts.map(contact => {
    // 优先取全名，没有的话拼接名和姓
    const fullName = contact.getFullName();
    return fullName ? fullName : `${contact.getGivenName()} ${contact.getFamilyName()}`;
  }).filter(name => name); // 过滤掉空名称，避免异常
}

2. 实现自定义排序逻辑 #

我们需要的排序规则是：含指定关键词（比如"Mobile"）的联系人排顶部，其余按字母序（不区分大小写）排列。写一个通用的排序函数：

const SORT_KEYWORD = "Mobile"; // 可根据需求修改关键词

function customSort(a, b) {
  // 判断两个联系人姓名是否包含关键词
  const aHasKeyword = a.includes(SORT_KEYWORD);
  const bHasKeyword = b.includes(SORT_KEYWORD);

  // 优先级：含关键词的排前面
  if (aHasKeyword && !bHasKeyword) return -1;
  if (!aHasKeyword && bHasKeyword) return 1;

  // 同一组内按字母序排序（不区分大小写更友好）
  return a.toLowerCase().localeCompare(b.toLowerCase());
}

3. 配置Materialize Autocomplete（前端HTML） #

把排序逻辑应用到Autocomplete组件，这里有两种方式：要么先把联系人数据排序好再传给组件，要么在组件的sortFunction里动态处理。推荐两种结合，确保初始列表和用户输入时的排序都符合要求：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
  <div class="input-field">
    <input type="text" id="autocomplete-input" class="autocomplete">
    <label for="autocomplete-input">选择联系人</label>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script>
    // 从GAS后端拉取联系人数据
    google.script.run.withSuccessHandler(contacts => {
      const SORT_KEYWORD = "Mobile";

      // 复用排序函数
      function customSort(a, b) {
        const aHas = a.includes(SORT_KEYWORD);
        const bHas = b.includes(SORT_KEYWORD);
        if (aHas && !bHas) return -1;
        if (!aHas && bHas) return 1;
        return a.toLowerCase().localeCompare(b.toLowerCase());
      }

      // 把联系人数组转成Materialize Autocomplete要求的键值对格式
      const sortedContacts = contacts.sort(customSort);
      const autocompleteData = sortedContacts.reduce((acc, name) => {
        acc[name] = null; // 如果需要显示头像，可以把值换成联系人头像URL
        return acc;
      }, {});

      // 初始化Autocomplete组件，同时设置动态排序函数
      const autocompleteElems = document.querySelectorAll('.autocomplete');
      M.Autocomplete.init(autocompleteElems, {
        data: autocompleteData,
        // 用户输入时，建议列表也按我们的规则排序
        sortFunction: function(a, b, inputString) {
          return customSort(a, b);
        }
      });
    }).getContactNames();
  </script>
</body>
</html>

为什么之前的sortFunction可能没生效？ #

Materialize的sortFunction参数接收三个值：a、b（待排序的两个选项文本）和inputString（用户当前输入的内容）。如果之前的写法没有优先判断关键词的存在性，或者排序逻辑的返回值不符合要求（必须是-1、0、1），就会导致排序失效。上面的写法明确处理了优先级，同时保证字母序的正确性。

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