Flutter基于Autocomplete实现多选输入：保留用户输入方案探讨

核心问题分析 #

Autocomplete组件默认在用户选中选项时，会用displayStringForOption返回的内容替换输入框文本，这是为了完成单选项的自动补全，但在多选场景下我们需要保留用户的搜索输入，继续进行下一次选择。

更优实现方案 #

无需额外维护独立变量跟踪输入，直接通过TextEditingController实现输入内容的持久化与控制，同时在选中选项后手动保持输入框文本不变：

完整代码示例 #

class MultiSelectAutoCompleteState extends State<MultiSelectAutoComplete> {
  Set<User> _selectedUsers = {};
  final TextEditingController _customController = TextEditingController();

  @override
  Widget build(BuildContext context) => Autocomplete<User>(
        fieldViewBuilder: (context, autoController, focusNode, onFieldSubmitted) {
          // 同步Autocomplete内置控制器与自定义控制器的内容
          _customController.text = autoController.text;
          _customController.selection = autoController.selection;
          
          return TextFormField(
            controller: _customController,
            focusNode: focusNode,
            onChanged: (value) {
              // 将输入内容同步回Autocomplete内置控制器，保证选项过滤逻辑正常工作
              autoController.text = value;
            },
            decoration: const InputDecoration(
              hintText: '搜索用户',
              border: OutlineInputBorder(),
            ),
          );
        },
        // 选中选项时，直接返回当前输入框的文本，避免被替换
        displayStringForOption: (u) => _customController.text,
        optionsBuilder: (TextEditingValue textEditingValue) {
          if (textEditingValue.text.isEmpty) {
            return widget.availableUsers.where((user) => !_selectedUsers.contains(user));
          }
          return widget.availableUsers.where((User u) =>
              !_selectedUsers.contains(u) &&
              (u.name.toLowerCase().contains(textEditingValue.text.toLowerCase()) ||
                  u.email.toLowerCase().contains(textEditingValue.text.toLowerCase())));
        },
        onSelected: (u) {
          setState(() {
            _selectedUsers = {..._selectedUsers, u};
          });
          // 选中后保持光标在输入框末尾，方便继续搜索
          _customController.selection = TextSelection.fromPosition(
            TextPosition(offset: _customController.text.length),
          );
        },
      );

  @override
  void dispose() {
    _customController.dispose();
    super.dispose();
  }
}

方案说明 #

1. 自定义控制器同步：通过双向同步Autocomplete内置控制器与自定义控制器，既保证选项过滤逻辑正常运行，又能完全控制输入框的显示内容。
2. displayStringForOption返回当前输入：直接使用自定义控制器的文本作为返回值，从根源上避免选中选项时输入框被替换。
3. 光标位置维护：选中用户后调整光标到输入框末尾，保证用户可以无缝继续搜索下一个目标。

针对你尝试方案的疑问解答 #

• 是否需要在onChanged中调用setState：不需要。inputVal仅在选中选项时被displayStringForOption调用，输入过程中触发重建只会增加不必要的性能消耗。
• 原方案的潜在问题：如果用户通过键盘导航选中选项（而非鼠标点击），可能出现inputVal未及时同步输入内容的情况，导致输入框显示异常，而控制器同步的方式能避免这类问题。

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