如何让Flutter TypeAheadField输入至少2字符后才显示下拉建议框

要实现仅在输入至少2个字符后才显示下拉建议框，只需做两处关键修改：

• 添加showSuggestionsOnFocus: false，禁用点击输入框时自动弹出建议框的行为
• 在suggestionsCallback中判断输入字符长度，仅当长度≥2时返回建议列表，否则返回空

修改后的完整代码如下：

TypeAheadField(
  // 新增：点击输入框不自动显示建议框
  showSuggestionsOnFocus: false,
  noItemsFoundBuilder: (context) => const SizedBox(
    height: 50,
    child: Center(child: Text("No user found!")),
  ),
  suggestionsBoxDecoration: SuggestionsBoxDecoration(
    color: Colors.deepPurple.shade50,
    elevation: 4.0,
    borderRadius: const BorderRadius.only(
      topLeft: Radius.circular(15),
      topRight: Radius.circular(15),
      bottomLeft: Radius.circular(15),
      bottomRight: Radius.circular(15))),
  textFieldConfiguration: TextFieldConfiguration(
    controller: _allLeaveViewModel.searchController,
    onChanged: (value) {
      setState(() {
        _allLeaveViewModel.isSearchTextNotEmpty.value =
            value.isNotEmpty;
      });
      _allLeaveViewModel.updateList(value);
      if (value.isEmpty) {
        Utils.removeFocusFromSearch(context);
      }
    },
    decoration: InputDecoration(
      contentPadding: const EdgeInsets.fromLTRB(
          16.0, 12.0, 16.0, 12.0),
      hintText: 'Filter by applicant',
      hintStyle: TextStyle(
          color: Colors.black.withOpacity(0.5),
          fontSize: 16),
      filled: true,
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(70),
        borderSide: BorderSide.none,
      ),
      suffixIcon: Obx(() {
        return Visibility(
          visible: _allLeaveViewModel
              .isSearchTextNotEmpty.value,
          child: IconButton(
            icon: Icon(
              Icons.cancel_outlined,
              color: Colors.grey.shade700,
              size: 25,
            ),
            onPressed: () {
              _allLeaveViewModel.clearSearchAndList();
            },
          ),
        );
      }),
    ),
  ),
  suggestionsCallback: (String pattern) {
    // 修改：仅当输入字符≥2时返回建议
    if (pattern.length < 2) {
      return [];
    }
    return _allLeaveViewModel.getSuggestions(pattern);
  },
  itemBuilder:
      (BuildContext context, String suggestion) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 10),
      child: Row(
        children: [
          const SizedBox(
            width: 10,
          ),
          Flexible(
              child: Text(
            suggestion,
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            style: const TextStyle(fontSize: 16),
          ))
        ],
      ),
    );
  },
  onSuggestionSelected: (suggestion) {
    setState(() {
      _allLeaveViewModel.isSearchTextNotEmpty.value =
          suggestion.isNotEmpty;
    });
    _allLeaveViewModel.searchController.text =
        suggestion;
    _allLeaveViewModel.updateList(suggestion);
  },
),

说明 #

• showSuggestionsOnFocus: false：避免用户点击输入框但未输入内容时弹出空建议框
• suggestionsCallback中的长度判断：确保只有输入足够字符后才请求并展示建议，若输入字符不足2个，建议框会自动隐藏

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