如何从Firestore获取数据生成列表实现Flutter输入框自动补全功能

1. 核心问题修正 #

你当前的代码存在两个核心问题：一是Firestore查询用了完全匹配逻辑，无法实现联想需要的模糊匹配；二是查询返回的是文档快照列表，未提取字段内容直接传给组件会导致类型错误。

修正Firestore查询逻辑 #

将完全匹配改为前缀匹配，同时提取文档中的商品名字段返回字符串列表，适配自动补全组件的要求：

static Future<List<String>> getSuggestion(String pattern) async {
  // 空输入直接返回空列表，避免无意义查询
  if (pattern.trim().isEmpty) return [];
  // 前缀匹配规则：匹配所有以输入内容开头的商品名
  String searchEnd = pattern.substring(0, pattern.length - 1) + 
      String.fromCharCode(pattern.codeUnitAt(pattern.length - 1) + 1);
  var querySnapshot = await FirebaseFirestore.instance
      .collection("QFS")
      .where('commodity', isGreaterThanOrEqualTo: pattern)
      .where('commodity', isLessThan: searchEnd)
      .get();
  // 提取商品名字符串返回
  return querySnapshot.docs.map((doc) => doc.get('commodity') as String).toList();
}

修正自动补全组件配置 #

调整第二个TypeAheadFormField的参数类型，适配返回的字符串列表：

TypeAheadFormField(
  textFieldConfiguration: TextFieldConfiguration(
      controller: commodityFiled2,
      decoration: const InputDecoration(
          labelText: 'Commodity2',
          icon: Icon(
            Icons.receipt_rounded,
            color: Colors.black87,
          ))),
  suggestionsCallback: getSuggestion,
  itemBuilder: (context, String suggestion) {
    return ListTile(
      title: Text(suggestion),
    );
  },
  transitionBuilder:
      (context, suggestionsBox, controller) {
    return suggestionsBox;
  },
  onSuggestionSelected: (String suggestion) {
    commodityFiled2.text = suggestion;
  },
  onSaved: (value) => _selectedCommodity2 = value!,
)

2. 可选优化项 #

• 如果需要不区分大小写的检索，可在Firestore中额外存储全小写的commodity_lower字段，查询时将输入内容转小写后匹配该字段即可
• 如果商品数据量不大，可一次性拉取全量商品名缓存到本地，复用你现有CommodityService的本地过滤逻辑，减少Firestore请求次数的同时支持任意位置的模糊匹配
• 可添加输入防抖逻辑，避免用户连续输入时频繁发起请求，降低请求开销

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