Api autocompelete search in flutter

Question

I want to implement a search textfield in my app which gets the result from API. but the problem is I call the API on the textfield's onChanged and when for example you type 'ab' first it call API for results of 'a' and as it takes some time to get result it would never call for 'ab' unless user type it very slowly. I want a Google-like autocompelete search.

TextField(
              controller: searchController.textcontroller.value,
              onChanged: (v) {
                if (searchController.textcontroller.value.text != null ||
                    searchController.textcontroller.value.text.length > 0) {
                  searchController.getResult();
                }
              },
              style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 20.0),
              decoration: InputDecoration(
                  border: InputBorder.none,
                  hintText: 'Search...',
                  hintStyle: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                      fontSize: 20.0)),
            ),

You can implement debouncer on your input. Check this answer https://stackoverflow.com/questions/51791501/how-to-debounce-textfield-onchange-in-dart . — David Sedlář, May 04 '21 at 05:24

score 1 · Answer 1 · answered Jun 07 '21 at 02:53

You can use flutter_typeahead: ^3.1.3 to auto-complete text from API

Here is an example

TextField (Widget):

Card(
                  elevation: 10.0,
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24.0)),
                  child: Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(24)),
                        color: Colors.white
                    ),
                    child: TypeAheadFormField(
                      textFieldConfiguration: TextFieldConfiguration(
                          controller: this._typeAheadController,
                          decoration: InputDecoration(         // Text field Decorations goes here
                              hintText: 'Name*',
                              prefixIcon: Icon(Icons.edit),
                              border: InputBorder.none
                          )
                      ),
                      suggestionsCallback: (pattern) {
                        return AutocompleteHelper().getSuggestions(pattern: pattern);
                      },
                      itemBuilder: (context, <T> suggestion) { //TODO: replace <T> with your return type
                        return ListTile(
                          title: Text(suggestion.nAME),subtitle: Text(suggestion.sYMBOL), //sugestion drop down widget customise here
                        );
                      },
                      transitionBuilder: (context, suggestionsBox, controller) {
                        return suggestionsBox;
                      },
                      onSuggestionSelected: (<T> suggestion) {  //TODO: replace <T> with your return type
                        this._typeAheadController.text = suggestion.nAME;
                      },
                      onSaved: (value) {
                        _transaction.name = value;
                        },
                    ),
                  ),
                ),

Autocomplete Helper class:

class AutocompleteHelper{

  Future getSuggestions({@required String pattern)async{
    var body = {'APIKey':'000','qry': (pattern+'%').toString()};//TODO: replace acording to your API
    Http.Response result = await Http.post(Uri.parse('yoururl.com/api'),body: body);
   //TODO: Handel result according to your API
    return result.body;

  }

Refer to the documentation for more help and API documentation.

Api autocompelete search in flutter

1 Answers1