Materialize AutoComplete使用Ajax更新数据时下拉框隐藏问题

我之前也碰到过一模一样的问题！Materialize的Autocomplete组件默认不会在你动态更新数据源后自动重新触发下拉显示，得手动帮它一把才行。下面是具体的解决思路和代码示例：

问题原因 #

当你在输入时实时获取数据并更新Autocomplete的数据源后，组件内部并没有感知到数据源变化需要重新渲染下拉面板，而且输入过程中可能触发了组件自带的下拉隐藏逻辑，导致用户看不到更新后的选项。

解决方案 #

核心思路是：用Materialize官方提供的updateData方法更新数据源，然后手动调用open()方法强制打开下拉菜单。

步骤1：初始化Autocomplete组件 #

先给Autocomplete设置一个初始的空数据源，确保组件能正常初始化：

$(document).ready(function() {
  // 初始化Name字段的Autocomplete
  $('#name-input').autocomplete({
    data: {},
    minLength: 1, // 设置输入1个字符就触发搜索
    // 其他配置项按需添加，比如placeholder、limit等
  });
});

步骤2：监听输入事件，实时更新并显示下拉 #

在输入框的input事件里，发送请求获取数据，更新数据源后强制打开下拉：

$('#name-input').on('input', function() {
  const userInput = $(this).val().trim();
  
  // 只有输入内容长度符合要求时才请求数据
  if (userInput.length >= 1) {
    // 替换成你的实际AJAX请求
    $.ajax({
      url: '/your-data-api',
      method: 'GET',
      data: { query: userInput },
      success: function(fetchedData) {
        // 把接口返回的数据转换成Materialize需要的格式：{ 选项文本: 图标URL或null }
        const autocompleteData = {};
        fetchedData.forEach(item => {
          // 如果不需要图标，值设为null即可
          autocompleteData[item.name] = null;
        });
        
        // 获取Autocomplete实例，更新数据源
        const autocompleteInstance = M.Autocomplete.getInstance($('#name-input'));
        autocompleteInstance.updateData(autocompleteData);
        
        // 关键：更新后强制打开下拉菜单
        autocompleteInstance.open();
      },
      error: function() {
        // 处理请求失败的情况，比如清空数据源
        const autocompleteInstance = M.Autocomplete.getInstance($('#name-input'));
        autocompleteInstance.updateData({});
      }
    });
  } else {
    // 输入为空时，清空数据源并关闭下拉
    const autocompleteInstance = M.Autocomplete.getInstance($('#name-input'));
    autocompleteInstance.updateData({});
    autocompleteInstance.close();
  }
});

额外注意事项 #

• 一定要用updateData方法更新数据源，而不是直接修改组件的data属性，因为这个方法会同步组件内部的状态，避免出现数据不同步的问题。
• 如果你的请求是异步的，要确保在请求成功后再执行更新和打开操作，避免竞态条件（比如前一个请求的结果覆盖后一个的）。
• 如果还是出现下拉闪烁或者隐藏的情况，可以检查是否有其他事件（比如blur）干扰，必要时可以在input事件中添加event.stopPropagation()来阻止事件冒泡。

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