Darshan
Darshan

Reputation: 11634

How to set value in AutoCompleteTextField?

I've textfield which displays autocomplete suggestions as the user types, using autocomplete_textfield package. Now I want to display the selected suggestion in the textfield, for which, inside itemSubmitted() method, I am using setState() { currentText = item.<suggestedText>} which prints the value correctly in console, but I am not sure how to display that value back in textfield. If I am not wrong, I need to use TextEditingController to retrieve and set the value in textfield but not sure how do I use TextEditingController inside AutoCompleteTextField.

Current code below:

@override
  void initState() {
    _loadData();
    textField = AutoCompleteTextField<Categories>(
      style: new TextStyle(color: Colors.white, fontSize: 16.0),
        decoration: new InputDecoration(
            suffixIcon: Container(
              width: 85.0,
              height: 60.0,
              color: Colors.green,
              child: new IconButton(
                icon: new Image.asset(
                  'assets/search_icon_ivory.png',
                  color: Colors.white,
                  height: 18.0,
                ),
                onPressed: () {},
              ),
            ),
            fillColor: Colors.black,
            contentPadding: EdgeInsets.fromLTRB(10.0, 30.0, 10.0, 20.0),
            filled: true,
            hintText: 'Search',
            hintStyle: TextStyle(color: Colors.white)),
        itemSubmitted: (item) {
          setState(() {
            currentText = item.autocompleteterm;
            print(currentText);
          });
        },
        submitOnSuggestionTap: true,
        clearOnSubmit: true,
        textChanged: (item) {
        },
        key: key,
        suggestions: CategoryViewModel.categories,
        textInputAction: TextInputAction.go,
        itemBuilder: (context, item) {
          return new Container(
            color: Colors.black87,
            child: Padding(
              padding: EdgeInsets.all(8.0),
              child: new Text(item.autocompleteterm,
              style: TextStyle(
                color: Colors.white70,
                fontSize: 16.0
              )),
            ),
          );
        },
        itemSorter: (a, b) {
          return a.autocompleteterm.compareTo(b.autocompleteterm);
        },
        itemFilter: (item, query) {
          return item.autocompleteterm
              .toLowerCase()
              .startsWith(query.toLowerCase());
        },
        );
    super.initState();
    _getUser();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomPadding: false,
        backgroundColor: Color(0xFF13212C),
        appBar: AppBar(
          title: Text('Demo'),
        ),
        drawer: appDrawer(),
        body: new Center(
            child: new Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
              new Column(children: <Widget>[
                textField,
              ]),

Upvotes: 1

Views: 3423

Answers (1)

Darshan
Darshan

Reputation: 11634

This can be achieved like this:

itemSubmitted: (item) {
          setState(() => textField.textField.controller.text = item.autocompleteterm);
          },

And make clearOnSubmit: false to be able to display selected value in textfield.

Upvotes: 4

Related Questions