时间戳

首页 > 解决方案 > Flutter中的Api自动完成搜索

flutter - Flutter中的Api自动完成搜索

问题描述

我想在我的应用程序中实现一个从 API 获取结果的搜索文本字段。但问题是我在文本字段的 onChanged 上调用 API，例如，当您首先键入“ab”时，它会调用 API 以获取“a”的结果，并且由于需要一些时间才能获得结果，除非用户调用“ab”打字很慢。我想要一个类似谷歌的自动完成搜索。

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

标签： flutterdart

解决方案

您可以使用 flutter_typeahead: ^3.1.3自动完成来自 API 的文本

这是一个例子

文本字段（小部件）：

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

自动完成助手类：

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;

  }

有关更多帮助和 API 文档，请参阅文档。

推荐阅读