CODEWITHSUNDEEP
flutterautocomplete
Rahul Sahni
Rahul Sahni

Reputation: 71

clear autocomplete text after selected in flutter?

i have created an autocomplete text field:

                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();
                            });
                            
                          }
                      ),

which suggest me some value when i type by a json file. Now what i want whenever i select the value it must clear the box .

Upvotes: 7

Views: 5545

Answers (4)

Godofsleepy
Godofsleepy

Reputation: 133

Using Key

For my case i reseting the widget using key (recreate the widget without last state), when key change the widget will rebuild here's the main code:

setState(() {
    valueKey= UniqueKey();
});

here's what implementation looks like with formbuilder package

class _AutoCompleteState<T extends Object> extends State<_AutoComplete<T>> {
          var valueKey = UniqueKey();
          @override
          Widget build(final BuildContext context) {
            return Autocomplete<T>(
              key: valueKey,
              optionsBuilder: widget.options,
              onSelected: (final selectedString) {
                FocusScope.of(context).unfocus();
              },
              fieldViewBuilder: (
                final context,
                final controller,
                final focusNode,
                final onEditingComplete,
              ) {
                return FormBuilderTextField(
                  onReset: () {
                    setState(() {
                      valueKey= UniqueKey();
                    });
                  },
                  focusNode: focusNode,
                  controller: controller,
                  autovalidateMode: AutovalidateMode.onUserInteraction,
                  onEditingComplete: onEditingComplete,
                  name: widget.name,
                );
              },
            );
          }
        }

Upvotes: 1

moath abusheikha
moath abusheikha

Reputation: 21

i think the solution is to add TextEditingController and FocusNode to your RawAutoComplete:

RawAutocomplete( textEditingController: textEC , focusNode: focusNode1,optionsBuilder:....

Upvotes: 0

Dilanka Fernando
Dilanka Fernando

Reputation: 454

In order to achieve this we should have access to text edit controller, so you could do something similar to access to text edit controller inside Autocomplete

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),
            );
          },
        )

Find the simple project that I did to achieve the above,

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),
        );
      },
    );
  }
}

Upvotes: 13

hamza felix
hamza felix

Reputation: 39

i can't tell you a precise solution because you are not sharing all the code but you should probably just re-initialize textEditingValue to empty string

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

Upvotes: -1

Related Questions