同一页面实现两个不同数据源的Materialize Chips自动完成

嘿，我完全懂你现在的困扰——单独用Materialize的Chips Autocomplete功能一切正常，但要让两个组件分别加载客户和地点的不同建议列表时就卡壳了对吧？问题出在你用了统一的类选择器$('.chips-autocomplete').material_chip()来初始化，这样所有同class的组件都会共享同一个配置，自然没法区分数据源。下面给你具体的解决方案：

步骤1：给两个Chips组件设置唯一标识 #

首先在HTML里给两个Chips分别加上独特的类或者ID，方便后续单独选择它们：

<!-- 客户选择Chips -->
<div class="chips chips-autocomplete chips-customers"></div>

<!-- 地点选择Chips -->
<div class="chips chips-autocomplete chips-locations"></div>

步骤2：分别初始化每个Chips组件，传入对应数据源 #

Materialize的material_chip方法支持通过autocompleteOptions.data配置项传入自定义的建议数据源，我们只需要给每个组件单独初始化并传入对应的数据源即可：

// 模拟客户数据源（替换成你的实际数据）
const customerSuggestions = {
  '客户A': null,
  '客户B': null,
  '客户C': null,
  '客户D': null
};

// 模拟地点数据源（替换成你的实际数据）
const locationSuggestions = {
  '北京朝阳区': null,
  '上海浦东新区': null,
  '广州天河区': null,
  '深圳南山区': null
};

// 初始化客户Chips
$('.chips-customers').material_chip({
  autocompleteOptions: {
    data: customerSuggestions,
    limit: Infinity, // 不限制建议数量
    minLength: 1 // 输入1个字符就触发建议
  },
  placeholder: '点击添加客户',
  secondaryPlaceholder: '+客户'
});

// 初始化地点Chips
$('.chips-locations').material_chip({
  autocompleteOptions: {
    data: locationSuggestions,
    limit: Infinity,
    minLength: 1
  },
  placeholder: '点击添加地点',
  secondaryPlaceholder: '+地点'
});

额外提示：动态加载数据源的情况 #

如果你的客户/地点数据是从后端接口异步获取的，一定要确保数据加载完成后再初始化对应的Chips组件，比如用async/await处理：

// 异步获取客户数据并初始化Chips
async function initCustomerChips() {
  try {
    const response = await fetch('/api/get-customers'); // 替换成你的接口地址
    const customerList = await response.json();
    
    // 把后端返回的数组转成Materialize需要的键值对格式
    const customerData = customerList.reduce((acc, item) => {
      acc[item.customerName] = null;
      return acc;
    }, {});

    $('.chips-customers').material_chip({
      autocompleteOptions: {
        data: customerData,
        limit: Infinity,
        minLength: 1
      },
      placeholder: '点击添加客户',
      secondaryPlaceholder: '+客户'
    });
  } catch (error) {
    console.error('加载客户数据失败:', error);
  }
}

// 同理初始化地点Chips
async function initLocationChips() {
  try {
    const response = await fetch('/api/get-locations'); // 替换成你的接口地址
    const locationList = await response.json();
    
    const locationData = locationList.reduce((acc, item) => {
      acc[item.locationName] = null;
      return acc;
    }, {});

    $('.chips-locations').material_chip({
      autocompleteOptions: {
        data: locationData,
        limit: Infinity,
        minLength: 1
      },
      placeholder: '点击添加地点',
      secondaryPlaceholder: '+地点'
    });
  } catch (error) {
    console.error('加载地点数据失败:', error);
  }
}

// 执行初始化
initCustomerChips();
initLocationChips();

核心思路就是避免批量初始化，给每个Chips组件单独配置专属的数据源，这样就能实现两个组件分别加载不同的建议列表了。

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