清除自动完成文本后,选定在 Flutter ?

muk1a3rh  于 2023-05-30  发布在  Flutter
关注(0)|答案(3)|浏览(87)

我创建了一个自动完成文本字段:

Autocomplete(
                          optionsBuilder: (TextEditingValue textEditingValue){
                            if (textEditingValue.text.isEmpty){
                              return const Iterable<String>.empty();
                            }
                            else{
                              return autoCompleteData.where((word) => word.toLowerCase()
                                  .contains(textEditingValue.text.toLowerCase())
                              );
                            }
                          },
                          onSelected: (value) {
                            print("this is the value $value");
                            setState((){
                              selected=value.toString();
                            });
                            
                          }
                      ),

当我输入json文件时,它给了我一些建议。现在我想要什么,每当我选择的值,它必须清除框。

rn0zuynd

rn0zuynd1#

为了实现这一点,我们应该有访问文本编辑控制器,所以你可以做一些类似的访问文本编辑控制器内自动完成

late TextEditingController textEditingController;
        Autocomplete(
          optionsBuilder: (TextEditingValue textEditingValue) {
            if (textEditingValue.text.isEmpty) {
              return const Iterable<String>.empty();
            } else {
              return _allSpecialitySkills
                  .where((word) => word.name.toLowerCase().contains(textEditingValue.text.toLowerCase()));
            }
          },
          onSelected: (value) {
            print("this is the value $value");
            textEditingController.text = "";
          },
          fieldViewBuilder: (BuildContext context, TextEditingController fieldTextEditingController,
              FocusNode fieldFocusNode, VoidCallback onFieldSubmitted) {
            textEditingController = fieldTextEditingController;
            return TextField(
              controller: fieldTextEditingController,
              focusNode: fieldFocusNode,
              style: const TextStyle(fontWeight: FontWeight.bold),
            );
          },
        )

找到我为实现上述目标所做的简单项目,

List<String> countries = <String>[
  "Africa",
  "Antarctica",
  "Asia",
  "Australia",
  "Europe",
  "North America",
  "South America",
  "Srilanka",
  "India",
  "China",
  "Japan",
  "Koria",
  "Thai",
];

class AutoCompleteExample extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _AutoCompleteExampleState();
}

class _AutoCompleteExampleState extends State<AutoCompleteExample> {
  late TextEditingController textEditingController;
  @override
  Widget build(BuildContext context) {
    return Autocomplete(
      optionsBuilder: (TextEditingValue textEditingValue) {
        if (textEditingValue.text.isEmpty) {
          return const Iterable<String>.empty();
        } else {
          return countries.where((word) => word.toLowerCase().startsWith(textEditingValue.text.toLowerCase()));
        }
      },
      onSelected: (value) {
        print("this is the value $value");
        textEditingController.text = "";
      },
      fieldViewBuilder: (BuildContext context, TextEditingController fieldTextEditingController,
          FocusNode fieldFocusNode, VoidCallback onFieldSubmitted) {
        textEditingController = fieldTextEditingController;
        return TextField(
          controller: fieldTextEditingController,
          focusNode: fieldFocusNode,
          style: const TextStyle(fontWeight: FontWeight.bold),
        );
      },
    );
  }
}
nszi6y05

nszi6y052#

我认为解决方案是将TextEditingController和FocusNode添加到RawAutoComplete:
RawAutocomplete(textEditingController:textEC,focusNode:focusNode1,optionsBuilder:....

s4chpxco

s4chpxco3#

我不能告诉你一个精确的解决方案,因为你没有共享所有的代码,但你可能应该重新初始化textEditingValue为空字符串

setState((){
selected=value.toString();
//call a method that set textEditingValue = ""
        });

相关问题