如何在Materialize Autocomplete中使用按键触发的动态数据库数据？

我看你现在卡在Materialize的Autocomplete组件没法通过keyup触发AJAX获取后端数据后正常工作的问题上了，咱们一步步拆解问题、解决它：

先说说你现有代码的核心问题 #

1. 数据格式不匹配：Materialize的Autocomplete要求data是键值对对象（比如{ "Java": null, "Python": null }），但你直接把后端返回的数组push到tags里，得到的是字符串数组，组件根本识别不了这个格式。
2. 重复初始化组件：每次keyup都调用autocomplete()重新初始化，会导致组件实例冲突，反而没法正常响应。正确姿势是先初始化一次，之后用updateData更新数据。
3. 请求过于频繁：keyup事件触发太密集，会发起大量不必要的AJAX请求，得加个防抖函数限制请求频率。

修正后的完整代码 #

前端JS代码

// 先初始化Autocomplete组件，初始数据为空
$('#QTag').autocomplete({
  data: {},
  minLength: 1 // 可选：设置输入至少1个字符才触发请求
});

// 防抖函数：避免输入时频繁发起AJAX请求
function debounce(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), wait);
  };
}

// 绑定keyup事件，用防抖包装减少请求次数
$('#QTag').keyup(debounce(function(event) {
  const inputVal = $(this).val().trim();
  
  // 如果输入为空，清空自动完成数据
  if (!inputVal) {
    $('#QTag').autocomplete('updateData', {});
    return;
  }

  $.ajax({
    type: 'POST',
    url: '/tryauto',
    data: { 'key': inputVal },
    // 别忘了带上Laravel的CSRF令牌，否则请求会被拦截
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    success: function(dataDB) {
      // 把后端返回的数据转换成Materialize需要的键值对格式
      const autocompleteData = {};
      $.each(dataDB, function(index, tagTitle) {
        autocompleteData[tagTitle] = null;
        // 如果需要给选项加图标，可以写成：autocompleteData[tagTitle] = '/path/to/icon.png';
      });
      // 用updateData方法更新组件数据
      $('#QTag').autocomplete('updateData', autocompleteData);
    },
    error: function(xhr) {
      console.error('AJAX请求出错:', xhr.responseText);
    }
  });
}, 300)); // 300ms防抖间隔，可根据需求调整

Laravel控制器代码优化

你的控制器可以简化一下，只返回需要的字段，并且处理空搜索的情况：

public function denemeauto(Request $request){
    $searchKey = $request->get('key');
    
    // 如果搜索关键词为空，直接返回空数组
    if(empty($searchKey)){
        return response()->json([]);
    }
    
    // 只获取匹配的tag_title字段，转成数组返回
    $tags = DB::table('tags')
        ->where('tag_title', 'LIKE', $searchKey . '%')
        ->pluck('tag_title')
        ->toArray();
    
    return response()->json($tags);
}

额外注意事项 #

• 确保页面已经正确引入Materialize的CSS、JS文件，且jQuery已经加载（Materialize依赖jQuery）。
• 页面头部必须包含CSRF令牌的meta标签：<meta name="csrf-token" content="{{ csrf_token() }}">。
• 调试时可以打开浏览器控制台，查看AJAX请求是否成功、返回的数据格式是否正确，有没有报错信息。

这样调整后，应该就能正常触发动态自动完成功能了～

内容的提问来源于stack exchange，提问作者Göktuğ Ozleyen